Встроить fancybox в редактор

[user0880]

Здравствуйте.
Есть желание сделать увеличение фото, которые вставлены в редактор, который используется для описания товара, категории и т.д.
Какие есть способы?
 

[Prooksius]

https://fancyapps.com.cach3.com/fancybox/3/docs/index.html#usage

Вот прям ответ на ваш вопрос.

[user0880]

32 минуты назад, Prooksius сказал:

https://fancyapps.com.cach3.com/fancybox/3/docs/index.html#usage

Вот прям ответ на ваш вопрос.

Проблема передать url изображения в href.
А если оставлять без href, то при закрытии изображение пропадает.

[Prooksius]

оо, как сложно.. по-моеу легче fancybox заюзать, он все сделает за вас.

[Prooksius]

54 минуты назад, user0880 сказал:

Проблема передать url изображения в href.

Вставьте полную картинку в редакторе, просто как картинку, переключитесь на код и возьмите из этой полной картинки путь (src), выйдите из кода, удалите картинку и вставьте путь в href

[Tom]

23 часа назад, user0880 сказал:

Здравствуйте.
Есть желание сделать увеличение фото, которые вставлены в редактор, который используется для описания товара, категории и т.д.
Какие есть способы?
 

Почему именно fancybox? Что в нём такого?

[user0880]

12 минут назад, Tom сказал:

Почему именно fancybox? Что в нём такого?

потому что он уже используется в шаблоне. Нет смысла подключать еще что-то.

[Tom]

Как то очень давно , пытался его встроить , много с ним геммороя.

Вы можете добавить всем изображениям fansybox внутри определённого дива или класса с помощью js.

Так напримере вкладки описания товара id="tab-description"

<script type="text/javascript">
   $(document).ready(function() {
     $("#tab-description img").attr("data-fancybox","gallery");
     $("#tab-description img").fancybox();
     $("#tab-description img").addClass("img-responsive"); // Добавляем класс img-responsive
     $("#tab-description img").attr("style",""); // Убираем стили (ширина, высота etc).
  });
</script>

 

[user0880]

6 часов назад, Tom сказал:

Как то очень давно , пытался его встроить , много с ним геммороя.

Вы можете добавить всем изображениям fansybox внутри определённого дива или класса с помощью js.

Так напримере вкладки описания товара id="tab-description"

<script type="text/javascript">
   $(document).ready(function() {
     $("#tab-description img").attr("data-fancybox","gallery");
     $("#tab-description img").fancybox();
     $("#tab-description img").addClass("img-responsive"); // Добавляем класс img-responsive
     $("#tab-description img").attr("style",""); // Убираем стили (ширина, высота etc).
  });
</script>

 

я примерно так и делал, только проблема в том, что с таким подходом при клике на изображение и последующим закрытием fancybox, оно пропадает, display:none присваивает изображению.

 

[user0880]

6 часов назад, Pascha сказал:

так я дал Вам рецепт где не подключаются ни какие библиотеки вовсе...
странные люди)))) 2 дня на то что можно было сделать еще вчера

пример плинтус-купить.рф/tenevoj-profil/tenevoj-profil-chernyj

ничего странного) просто есть желание попробовать решить это через fancybox.

[Tom]

12 минут назад, user0880 сказал:

я примерно так и делал, только проблема в том, что с таким подходом при клике на изображение и последующим закрытием fancybox, оно пропадает, display:none присваивает изображению.

 

Вспомнил. По этой причине и бросил этот скрипт. Нужно  на сколько помню, добавить условие after close. 

[Prooksius]

как вариант, можно в контроллере читать содержимое описания, искать регуляркой вставленные в текст картинки и оборачивать их fancybox-ссылками. И уже исправленное отдавать в вид.
Правда, так заменятся все картинки, иконки какие-нибудь, которые по идее и не нужно увеличивать...

[Tom]

8 минут назад, Prooksius сказал:

как вариант, можно в контроллере читать содержимое описания, искать регуляркой вставленные в текст картинки и оборачивать их fancybox-ссылками. И уже исправленное отдавать в вид.

Не поможет. Я как то гуглил помню решение.

Там в чём суть.

Подключили фенсибокс. Эта часть без проблем.

Открываем картинку, она открывается в самом фенсибокс. Закрываем и имеем пустое место, вместо исходника по которому кликали, потому что сам фенсибокс присваивает ему display none. Как то так, если не ошибаюсь.

[Prooksius]

нее, я в каждый проект пихаю fancybox, на страницу товара во все картинки вставляю эти ссылки на попапы. В результате получаются уже готовые карусели и довольно неплохие.
Дело в том, что он их открывает отдельно, в создаваемом внизу body диве. А открывает он не сам файл картинки, а href ссылки которая обернута вокруг картинки. И при закрытии он анимирует уменьшение картинки ровно в место, где мы кликнули по ней. Вообще очень удобный плагин, если используется jQuery, я всегда им пользуюсь.

[Prooksius]

https://codepen.io/fancyapps/pen/oPKVea?editors=1000
Вот пример, смотрите. Там вот именно так и получается. И ничего не скрывается

 

https://codepen.io/fancyapps/pen/wEVOPa?editors=1000

И вот галерея, когда можно прокручивать по картинкам

[Tom]

Тогда как то так .

<script>
  $(document).ready(function() {
    $('#tab-description img').each(function() {
      var href = $(this).attr('src');
      $(this).addClass('img-responsive');
      $(this).wrap('<a href="'+href+'" data-fancybox="gallery" style=""></a>');
   });
 });
</script>

 

[Prooksius]

3 минуты назад, Pascha сказал:

http://test.opencartbest.ru/index.php?route=product/product&product_id=42

Супер, и галерея готова уже.

 

Вы через регулярку выцепляли картинки? Или javascript-ом?

[Tom]

14 минут назад, Tom сказал:

Тогда как то так .

<script>
  $(document).ready(function() {
    $('#tab-description img').each(function() {
      var href = $(this).attr('src');
      $(this).addClass('img-responsive');
      $(this).wrap('<a href="'+href+'" data-fancybox="gallery" style=""></a>');
   });
 });
</script>

 

Проверил...работает
http://tomtest.tw1.ru/canon-eos-5d

[Prooksius]

Да, классно получилось..

Но тут есть один ньюанс. В описание могут вставить очень большую картинку, 3000*2000 точек, например. И в описании ее как бы не комильфо отображать полную.
Я бы все же сделал разбор описания на этапе контроллера, покидал бы все картинки в image->resize() и подготовил бы уже готовое описание со ссылками на полные картинки.

[Tom]

Только что, Prooksius сказал:

И в описании ее как бы не комильфо отображать полную.

Так есть же 
 

 

23 минуты назад, Tom сказал:

$(this).addClass('img-responsive');

Не решение?

[Prooksius]

3 минуты назад, Tom сказал:

$(this).addClass('img-responsive');

ну частично да, но с сервера будет загружаться полная же и сразу. А если заменить в контроллере, то уже и скорость загрузки страницы повысите. И попугаи будут побольше)) Их так любят заказчики)

 

С другой стороны, можно использовать и loading="lazy"

[Tom]

Как говорит один известный ТВ герой "Но это уже совершенно другая история...." ))))))

Думаю ТС столько накидали идей, что можно ваять модификатор в 10 строк и за миллионы на форум.

Всех с Наступающим!

PS: прикрутил и к картинкам самого товара. Может и удобнее даже встроенного скрипта.

[Prooksius]

4 минуты назад, Pascha сказал:

<script src="catalog/view/javascript/lazyload/jquery.lazyload.min.js"

а по-моему уже и не надо этот скрипт, loading="lazy" теперь на уровне браузера поддержвается. Ну не у осла, конечно..

[user0880]

Ребята! Все красавцы, большое всем спасибо! Всех с наступающим! Всем добра)