Встроить 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]

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