Вывод изображений в модальном окне загруженными WYSIWYG редактором.

+8
1.9K

Всем привет. Столкнулся с такой проблемой как невозможность вывода изображений в модальном окне которые загружены через WYSIWYG редактор. Ведь если с компьютера это ещё не так критично, то с телефона ничего не разглядеть. 

Вот так выглядит моя доработка на ПК:

Изображение

Изображение

Вот так на телефоне:

ИзображениеИзображение

Если изображение большое то оно открывается в полном размере и вы можете скролить его влево, вправо, вверх и вниз, но это сможете убрать стилями если захотите.

Для подключения этого добра к себе на сайт скачайте архив и раскидайте файлы по папкам.

Файл popup_img.js закидывайте в папку JS вашего шаблона

Файл popup_img.css закидывайте в папку CSS вашего шаблона

В файл main.tpl.php между тегами <head></head> добавьте код который подключит эти файлы.

  1. <?php $this->addMainJS("templates/{$this->name}/js/popup_img.js"); ?>
  2.  
  3. <?php $this->addMainCSS("templates/{$this->name}/css/popup_img.css"); ?>
  1. $(document).ready(function() { // Ждём загрузки страницы
  2.  
  3. $(".spoiler_body img, .post-content-cell img, .f_content img, .pic_container img, .image_img").click(function(){ // Тут перечислям классы в которых искать картинку
  4. var img = $(this); // Получаем изображение, на которое кликнули
  5. var src = img.attr('src'); // Достаем из этого изображения путь до картинки
  6.  
  7. $("body").append("<div class='modal-overlay'>"+ //Добавляем в тело документа разметку всплывающего окна
  8. "<div class='modal-table'>"+ //
  9. "<div class='modal-table-cell'>"+
  10. "<div class='modal'>"+
  11. "<div class='modal__close'></div>"+
  12. "<div class='modal__header'>Изображение</div>"+
  13. "<div class='modal__content'>"+
  14. "<img src="+src+" href='javascript: void(0);' class='modal-link' data-modal-id='1'/>"+ // Само увеличенное фото
  15. "</div></div></div></div></div>");
  16. $(".modal-overlay").fadeIn(800);
  17. $(".modal-table").click(function(){
  18. $(".modal-overlay").fadeOut(800);
  19. setTimeout(function() {
  20. $(".modal-overlay").remove();
  21. }, 800);
  22. });
  23. });
  24. });
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31. $(document).ready(function() {
  32.  
  33. // Функция открытия модального окна
  34.  
  35. $(".modal-link").on("click", function() {
  36.  
  37. $('.modal-overlay[data-modal-id="'+$(this).data('modal-id')+'"]').addClass("modal-overlay_visible");
  38.  
  39. });
  40.  
  41. // Функция закрытия модального окна нажатием на кнопку
  42.  
  43. $(".modal__close").on("click", function() {
  44.  
  45. $(".modal-overlay").removeClass("modal-overlay_visible");
  46.  
  47. });
  48.  
  49. // Функция закрытия модального окна нажатием вне окна
  50.  
  51. $(document).on("click", function(e) {
  52.  
  53. if(!$(e.target).closest(".modal").length && !$(e.target).closest(".modal-link").length) {
  54.  
  55. $(".modal-overlay").removeClass("modal-overlay_visible");
  56.  
  57. }
  58.  
  59. });
  60.  
  61. });
  1. .modal-overlay * {
  2. -webkit-box-sizing: border-box;
  3. -moz-box-sizing: border-box;
  4. box-sizing: border-box;
  5.  
  6. }
  7.  
  8. .modal-overlay *:before,
  9. .modal-overlay *:after {
  10. -webkit-box-sizing: border-box;
  11. -moz-box-sizing: border-box;
  12. box-sizing: border-box;
  13. }
  14.  
  15. .modal-overlay {
  16. position: fixed;
  17. top: 0;
  18. left: 0;
  19. right: 0;
  20. bottom: 0;
  21. background: rgba(0, 0, 0, .6);
  22. overflow: auto;
  23. z-index: 999;
  24. transition: .4s all;
  25. cursor: pointer;
  26. }
  27.  
  28. .modal-overlay_visible {
  29. opacity: 1;
  30. visibility: visible;
  31. }
  32.  
  33. .modal-table {
  34. display: table;
  35. width: 100%;
  36. height: 100%;
  37. }
  38.  
  39. .modal-table-cell {
  40. display: table-cell;
  41. vertical-align: middle;
  42. text-align: center;
  43. padding: 0 15px;
  44. }
  45.  
  46. .modal {
  47. transition: .4s all;
  48. display: inline-block;
  49. padding: 35px 45px 20px 30px;
  50. max-width: 95%;
  51. height: auto;
  52. width: 80%;
  53. background: #fff;
  54. box-shadow: 0px 4px 8px rgba(0, 0, 0, .25);
  55. color: #333;
  56. text-align: left;
  57. font-family: Arial;
  58. margin: 30px 0;
  59. /* transform: translate(0, 20%); */
  60. position: relative;
  61. border-radius: 4px 6px 4px 4px;
  62. cursor: auto;
  63. font-size: 16px;
  64. }
  65.  
  66. .modal-overlay_visible .modal {
  67. transform: translate(0);
  68. }
  69.  
  70. .modal__header {
  71. font-size: 22px;
  72. font-weight: 400;
  73. padding: 0 0 30px 0;
  74. }
  75.  
  76. .modal__content {
  77. padding: 0 0 10px 0;
  78. margin: 0;
  79. }
  80.  
  81. .modal__close {
  82. position: absolute;
  83. right: 10px;
  84. top: 0;
  85. background: #da4d43;
  86. width: 25px;
  87. height: 25px;
  88. border-radius: 0 0 4px 4px;
  89. transition: .4s all;
  90. }
  91.  
  92. .modal__close:hover {
  93. background: #ed5f55;
  94. cursor: pointer;
  95. }
  96.  
  97. .modal__close:before,
  98. .modal__close:after {
  99. content: "";
  100. display: block;
  101. height: 16px;
  102. width: 1px;
  103. transform: rotate(45deg);
  104. background: #fff;
  105. position: absolute;
  106. left: 0;
  107. right: 0;
  108. margin: auto;
  109. top: 0;
  110. bottom: 0;
  111. }
  112. .modal-link{
  113. width: 100%;
  114. /* text-align: center; */
  115. /* align-items: center; */
  116. margin-left: auto;
  117. margin-right: auto;
  118. display: block;
  119. }
  120. .modal__close:after {
  121. transform: rotate(-45deg);
  122. }
  123. .image_img{
  124. cursor: pointer;
  125. }

Согласно этому коду в модальном окне будут открываться изображения которые используют классы ".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" и заголовок "Нажмите чтобы увеличить". Благодаря этому модальное окно будет работать и в комментариях.

Изображение

Прикреплённый файл:
Скачать 10 Кбскачан 65 раз
+1
Traibs Traibs 3 года назад #

Добрый день, а откуда взять файлик plugin.min.js я не нашел архива в этом посте

+1
CEH9I CEH9I 3 года назад #

Приветствую. Файл почему то не прикрепился. Завтра буду за компьютером, добавлю.

0
Traibs Traibs 3 года назад #

Хорошо, спасибо большое, очень полезная статья, как раз то что искал))

0
CEH9I CEH9I 3 года назад #

Я тоже долго искал, но не найдя сам стал разбираться)

0
Traibs Traibs 3 года назад #

Добрый вечер, а как сделать чтобы при закрытии модальное окно изображения исчезало мгновенно а не плавно затухало?

0
Loadырь Loadырь 3 года назад #

А зачем правка нужна в файле редактора, которая слетит минимум после следующего релиза? Можно же в popup_img.js указать селектор типа «content img». Или там не только класс добавляется к картинкам?

0
CEH9I CEH9I 3 года назад #

Можно и так, только в комментариях вроде как другой селектор, а тут именно к загруженным файлам будет применятся. И так же добавляется title.

0
CEH9I CEH9I 3 года назад #

Прикрепил файл

0
Yuran Yuran 3 года назад #

В архиве отсутствует файл plugin.min.js — выложите пожалуйста куда-нибудь.

0
Викторыч Викторыч 3 года назад #

С утра скачал, был там… сейчас скачал — никуда не делся. ) 

Изображение

 

CEH9I CEH9I 3 года назад #
Комментарий удален
0
CEH9I CEH9I 3 года назад #

Все на месте. Изображение

0
Yuran Yuran 3 года назад #

О извиняюсь, я затупил:) 

Изображение

0
alexandr22 alexandr22 3 года назад #

Запрос в вселенную, что бы была возможностью любое слово выделять в статье и открывать эту подсказку в модальном окне, где есть возможность написать текст ❤️

Make Make 3 года назад #
Комментарий удален
-1
alexandr22 alexandr22 3 года назад #

Пример я пишу статью о полезности продукта упоминаю на какой воде или какой состава используется, что бы открыть отдельную подсказку, статью для удобства пользователя не переходя открыть информацию. По идее можно использовать если отдельная статья  css класс modal. благодарю fuze он научил создал такой прекрасный движок, а бывает охота как подсказку сделать к этому слову в несколько предложений. Начал изучать движок и меньше стараться задавать вопросов, спасибо Fuze, уроки принял. Вся информация есть надо только приложить усилия изучить, а не выпрашивать о помощи 

Make Make 3 года назад #
Комментарий удален
0
alexandr22 alexandr22 3 года назад #

Благодарю за новые слова, вы подсказали куда копать. Буду изучать и применять. ❤️

alexandr22 alexandr22 3 года назад #
Комментарий удален
Make Make 3 года назад #
Комментарий удален
alexandr22 alexandr22 3 года назад #
Комментарий удален
0
alexandr22 alexandr22 3 года назад #

Много информации так сразу для меня )) я даже Html не знаю, буду изучать. Раньше не красиво поступал кого то просил, а надо было самому изучать, всё есть, надо лишь начать изучать. Начну английский изучать )  
Благодарю за рекомендации буду изучать и применять эти знания 

0
alexandr22 alexandr22 3 года назад #

Благодарю за самые качественные ссылки где могу получить для себя информацию 

-1
alexandr22 alexandr22 3 года назад #

У меня с  программированием очень сложно с этим, а там знания надо эти проявлять, буду пробывать  стараться разобраться 

0
alexandr22 alexandr22 3 года назад #

т.к много проектов которые будут нести денежную энергию и приносить доход

Make Make 3 года назад #
Комментарий удален
0
alexandr22 alexandr22 3 года назад #

сам бы хотел знать, проекты начали приходить ) надо думать как их реализовать и с  доверенными людьми — сейчас думаю как это поженить ❤️

0
Yuran Yuran 3 года назад #

Поставил, все работает, но над шапкой сайта появился какой то блок белого цвета....

Изображение

 

Подскажите пожалуйста как убрать этот блок или куда-нибудь засунуть его… или спрятать… Консоль смотрел, там такая хрень

Изображение

На смартфоне такой же белый блок… Подскажите пожалуйста куда копать.

Еще от автора

С Наступающим 2023 годом
Хотел бы поблагодарить и поздравить участников сообщества
Поле "Копилка для InstantCMS 2.14.2"
Делюсь бесплатно платным полем)))
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.