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

+8
774

Всем привет. Столкнулся с такой проблемой как невозможность вывода изображений в модальном окне которые загружены через 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 Кбскачан 11 раз
0
Реклама Реклама #
+1
Traibs Traibs 11 дней назад #

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

+1
CEH9I CEH9I 11 дней назад #

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

0
Traibs Traibs 11 дней назад #

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

0
CEH9I CEH9I 11 дней назад #

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

0
Traibs Traibs 10 дней назад #

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

0
Loadырь Loadырь 11 дней назад #

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

0
CEH9I CEH9I 11 дней назад #

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

0
CEH9I CEH9I 11 дней назад #

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

0
Юран Юран 11 дней назад #

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

0
Викторыч Викторыч 11 дней назад #

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

Изображение

 

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

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

0
Юран Юран 11 дней назад #

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

Изображение

0
alexandr22 alexandr22 10 дней назад #

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

0
Make Make 10 дней назад #

Вопрос, Зачем?

-1
alexandr22 alexandr22 10 дней назад #

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

0
Make Make 10 дней назад #

Что мешает использовать все возможности бутстрапа для этого? Тултипы, баджи, спойлеры — миллион способов, как это можно сделать.

0
alexandr22 alexandr22 10 дней назад #

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

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

Только не говорите, что вас забанили в гугле)

https://getbootstrap.com/docs/4.0/

https://bootstrap-4.ru/docs

И т.д. Информации в интернете море.

 

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

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

0
alexandr22 alexandr22 10 дней назад #

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

-1
alexandr22 alexandr22 10 дней назад #

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

0
alexandr22 alexandr22 10 дней назад #

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

+4
Make Make 10 дней назад #

Александр, с вами все нормально?

0
alexandr22 alexandr22 9 дней назад #

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

0
Юран Юран 3 дня назад #

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

Изображение

 

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

Изображение

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

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.