Всем привет. Столкнулся с такой проблемой как невозможность вывода изображений в модальном окне которые загружены через WYSIWYG редактор. Ведь если с компьютера это ещё не так критично, то с телефона ничего не разглядеть.
Вот так выглядит моя доработка на ПК:
Вот так на телефоне:
Если изображение большое то оно открывается в полном размере и вы можете скролить его влево, вправо, вверх и вниз, но это сможете убрать стилями если захотите.
Для подключения этого добра к себе на сайт скачайте архив и раскидайте файлы по папкам.
Файл popup_img.js закидывайте в папку JS вашего шаблона
Файл popup_img.css закидывайте в папку CSS вашего шаблона
В файл main.tpl.php между тегами <head></head> добавьте код который подключит эти файлы.
<?php $this->addMainJS("templates/{$this->name}/js/popup_img.js"); ?> <?php $this->addMainCSS("templates/{$this->name}/css/popup_img.css"); ?>
$(document).ready(function() { // Ждём загрузки страницы $(".spoiler_body img, .post-content-cell img, .f_content img, .pic_container img, .image_img").click(function(){ // Тут перечислям классы в которых искать картинку var img = $(this); // Получаем изображение, на которое кликнули var src = img.attr('src'); // Достаем из этого изображения путь до картинки $("body").append("<div class='modal-overlay'>"+ //Добавляем в тело документа разметку всплывающего окна "<div class='modal-table'>"+ // "<div class='modal-table-cell'>"+ "<div class='modal'>"+ "<div class='modal__close'></div>"+ "<div class='modal__header'>Изображение</div>"+ "<div class='modal__content'>"+ "<img src="+src+" href='javascript: void(0);' class='modal-link' data-modal-id='1'/>"+ // Само увеличенное фото "</div></div></div></div></div>"); $(".modal-overlay").fadeIn(800); $(".modal-table").click(function(){ $(".modal-overlay").fadeOut(800); setTimeout(function() { $(".modal-overlay").remove(); }, 800); }); }); }); $(document).ready(function() { // Функция открытия модального окна $(".modal-link").on("click", function() { $('.modal-overlay[data-modal-id="'+$(this).data('modal-id')+'"]').addClass("modal-overlay_visible"); }); // Функция закрытия модального окна нажатием на кнопку $(".modal__close").on("click", function() { $(".modal-overlay").removeClass("modal-overlay_visible"); }); // Функция закрытия модального окна нажатием вне окна $(document).on("click", function(e) { if(!$(e.target).closest(".modal").length && !$(e.target).closest(".modal-link").length) { $(".modal-overlay").removeClass("modal-overlay_visible"); } }); });
.modal-overlay * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .modal-overlay *:before, .modal-overlay *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); overflow: auto; z-index: 999; transition: .4s all; cursor: pointer; } .modal-overlay_visible { opacity: 1; visibility: visible; } .modal-table { display: table; width: 100%; height: 100%; } .modal-table-cell { display: table-cell; vertical-align: middle; text-align: center; padding: 0 15px; } .modal { transition: .4s all; display: inline-block; padding: 35px 45px 20px 30px; max-width: 95%; height: auto; width: 80%; background: #fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, .25); color: #333; text-align: left; font-family: Arial; margin: 30px 0; /* transform: translate(0, 20%); */ position: relative; border-radius: 4px 6px 4px 4px; cursor: auto; font-size: 16px; } .modal-overlay_visible .modal { transform: translate(0); } .modal__header { font-size: 22px; font-weight: 400; padding: 0 0 30px 0; } .modal__content { padding: 0 0 10px 0; margin: 0; } .modal__close { position: absolute; right: 10px; top: 0; background: #da4d43; width: 25px; height: 25px; border-radius: 0 0 4px 4px; transition: .4s all; } .modal__close:hover { background: #ed5f55; cursor: pointer; } .modal__close:before, .modal__close:after { content: ""; display: block; height: 16px; width: 1px; transform: rotate(45deg); background: #fff; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; } .modal-link{ width: 100%; /* text-align: center; */ /* align-items: center; */ margin-left: auto; margin-right: auto; display: block; } .modal__close:after { transform: rotate(-45deg); } .image_img{ cursor: pointer; }
Согласно этому коду в модальном окне будут открываться изображения которые используют классы ".spoiler_body img, .post-content-cell img, .f_content img, .pic_container img, .image_img", вы можете добавить свои классы для отслеживания в файле popup_img.js.
На оригинальность и красоту кода не претендую, если есть что улучшить с радостью выслушаю специалистов, все это искал в интернете и приспособил для себя, если хоть кому-то поможет моя статья то значит не зря я все это расписывал.
Так же в архиве есть файлик plugin.min.js, который нужно закинуть в папку image по пути wysiwyg/tinymce/files/plugins/ я его отредактировал чтобы при загрузке изображения на сайте через редактор TINYMCE, в код изображения добавлялся класс "image_img" и заголовок "Нажмите чтобы увеличить". Благодаря этому модальное окно будет работать и в комментариях.
Реклама #
Traibs 3 года назад #
Добрый день, а откуда взять файлик plugin.min.js я не нашел архива в этом посте
CEH9I 3 года назад #
Приветствую. Файл почему то не прикрепился. Завтра буду за компьютером, добавлю.
Traibs 3 года назад #
Хорошо, спасибо большое, очень полезная статья, как раз то что искал))
CEH9I 3 года назад #
Я тоже долго искал, но не найдя сам стал разбираться)
Traibs 3 года назад #
Добрый вечер, а как сделать чтобы при закрытии модальное окно изображения исчезало мгновенно а не плавно затухало?
Loadырь 3 года назад #
А зачем правка нужна в файле редактора, которая слетит минимум после следующего релиза? Можно же в popup_img.js указать селектор типа «content img». Или там не только класс добавляется к картинкам?
CEH9I 3 года назад #
Можно и так, только в комментариях вроде как другой селектор, а тут именно к загруженным файлам будет применятся. И так же добавляется title.
CEH9I 3 года назад #
Прикрепил файл
Yuran 3 года назад #
В архиве отсутствует файл plugin.min.js — выложите пожалуйста куда-нибудь.
Викторыч 3 года назад #
С утра скачал, был там… сейчас скачал — никуда не делся. )
CEH9I 3 года назад #
CEH9I 3 года назад #
Все на месте.
Yuran 3 года назад #
О извиняюсь, я затупил:)
alexandr22 3 года назад #
Запрос в вселенную, что бы была возможностью любое слово выделять в статье и открывать эту подсказку в модальном окне, где есть возможность написать текст ❤️
Make 3 года назад #
alexandr22 3 года назад #
Пример я пишу статью о полезности продукта упоминаю на какой воде или какой состава используется, что бы открыть отдельную подсказку, статью для удобства пользователя не переходя открыть информацию. По идее можно использовать если отдельная статья css класс modal. благодарю fuze он научил создал такой прекрасный движок, а бывает охота как подсказку сделать к этому слову в несколько предложений. Начал изучать движок и меньше стараться задавать вопросов, спасибо Fuze, уроки принял. Вся информация есть надо только приложить усилия изучить, а не выпрашивать о помощи
Make 3 года назад #
alexandr22 3 года назад #
Благодарю за новые слова, вы подсказали куда копать. Буду изучать и применять. ❤️
alexandr22 3 года назад #
Make 3 года назад #
alexandr22 3 года назад #
alexandr22 3 года назад #
Много информации так сразу для меня )) я даже Html не знаю, буду изучать. Раньше не красиво поступал кого то просил, а надо было самому изучать, всё есть, надо лишь начать изучать. Начну английский изучать )
Благодарю за рекомендации буду изучать и применять эти знания
alexandr22 3 года назад #
Благодарю за самые качественные ссылки где могу получить для себя информацию
alexandr22 3 года назад #
У меня с программированием очень сложно с этим, а там знания надо эти проявлять, буду пробывать стараться разобраться
alexandr22 3 года назад #
т.к много проектов которые будут нести денежную энергию и приносить доход
Make 3 года назад #
alexandr22 3 года назад #
сам бы хотел знать, проекты начали приходить ) надо думать как их реализовать и с доверенными людьми — сейчас думаю как это поженить ❤️
Yuran 3 года назад #
Поставил, все работает, но над шапкой сайта появился какой то блок белого цвета....
Подскажите пожалуйста как убрать этот блок или куда-нибудь засунуть его… или спрятать… Консоль смотрел, там такая хрень
На смартфоне такой же белый блок… Подскажите пожалуйста куда копать.