Помощь Добавление эффекта увеличения на любую картинку Opencart

[MikeleCorleone]

Добрый день, нужно чтобы на любой картинке (по выбору) на любой страничке (по выбору) включался эффект увеличения картинки как на товарах, (colorbox fancybox в зависимости что стоит).
Возможно когда прописываешь и вставляешь картинки в описании нужно им что-либо прописать, класс, id ... тоже пойдет такой вариант - без заморочек.

Добавлял это
<script type="text/javascript">$('.colorbox').colorbox({overlayClose: true,opacity: 0.5});</script>
прописывал картинке class="colorbox cboxElement" rel="colorbox"
В итоге при нажатии на картинку экран затеняется а картинки нету совсем

 

[stwild]

<script type="text/javascript">$('.colorbox').colorbox({overlayClose: true,opacity: 0.5});</script>

добавлял сверху или снизу картинки?

Правильнее заключить код инициализации плагина в этот код, чтоб гарантированно он выполнялся после того, как загрузится весь DOM документа ))

$(document).ready(function() {
  $('.colorbox').colorbox({overlayClose: true,opacity: 0.5});
});

прописывал картинке class="colorbox cboxElement" rel="colorbox"

к картинке или к тегу <A>? вероятнее всего код должен выглядеть так:

<a href="[большая картинка]" class="colorbox cboxElement" rel="colorbox"><img src="[маленькая картинка]"></a>

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

Решать проблему надо либо вставкой ссылки, либо править js, чтоб брал не из атрибута href, а из src ))

 

[MikeleCorleone]

<script type="text/javascript">$('.colorbox').colorbox({overlayClose: true,opacity: 0.5});</script>

добавлял сверху или снизу картинки?

Правильнее заключить код инициализации плагина в этот код, чтоб гарантированно он выполнялся после того, как загрузится весь DOM документа ))

$(document).ready(function() {
  $('.colorbox').colorbox({overlayClose: true,opacity: 0.5});
});

к картинке или к тегу <A>? вероятнее всего код должен выглядеть так:

<a href="[большая картинка]" class="colorbox cboxElement" rel="colorbox"><img src="[маленькая картинка]"></a>

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

Решать проблему надо либо вставкой ссылки, либо править js, чтоб брал не из атрибута href, а из src ))

А большая и маленькая картинки это обязательно должны быть 2 разные картинки или можно использовать одну? просто маленькая будет уменьшена до нужных размеров путем задания ей ширины и высоты?

 

[stwild]

не обязательно, но как бы вполне логично)) зачем грузить здоровую картинку, чтоб показать превьюху? если не хочется делать превьюхи, то лучше поправить js, чтоб увеличивалось с img ))

 

[MikeleCorleone]

не обязательно, но как бы вполне логично)) зачем грузить здоровую картинку, чтоб показать превьюху? если не хочется делать превьюхи, то лучше поправить js, чтоб увеличивалось с img ))

Спасибо за помощь, вот так все получилось <script type="text/javascript">$(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });</script>
Ну и плюс стиль и рел на ссылку
А например можно исхитрится и написать что-нибудь в коде страницы где требуется выводить в модальном окне картинки (например если требуется в категориях то написать в category.tpl ну и т.д ) а в описании на ссылках просто задавать классы и релы ?

 

[stwild]

можно ))
js код плагина colorbox в студию ) не видя кода трудно сказать, что нужно заменить ))

собственно там должно быть что то вроде attr("href") его надо заменить на attr("src") и будет работать с img, а не со ссылок ))
хотя конечно гораздо грамотнее из соображений совместимости не тупо заменить href на src, а поставить проверку вернул ли что то запрос к атрибуту href, если не вернул, то попробовать взять из src ) тогда и то и то будет работать ))

 

[MikeleCorleone]

Вот colorbox, хотя скорее я не так выразился, меня устраивает вот эта конструкция <a href="[большая картинка]" class="colorbox cboxElement" rel="colorbox"><img src="[маленькая картинка]"></a>
Я про то чтобы не вводить каждый раз <script type="text/javascript">$(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });</script>
А прописать похожее в шаблоне, например если хочешь чтобы подключалось на странице категорий то прописать в category.tpl, ну чтобы каждый раз в описании не вводить...

 

[stwild]

либо в header.tpl прописать

<script type="text/javascript">$(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });</script>

тогда во всех страницах появится

либо в jquery.colorbox.js в самом низу

$(document).ready(function() { $('.colorbox').colorbox({overlayClose: true,opacity: 0.5}); });

тогда вместе с колорбоксом и инициализация прогружаться будет

по поводу src вместо href: заменить строчку

settings.href = settings.href || $(element).attr('href');

на

settings.href = settings.href || $(element).attr('href') || $(element).attr('src');

 

[MikeleCorleone]

по поводу src вместо href: заменить строчку

settings.href = settings.href || $(element).attr('href');

на

settings.href = settings.href || $(element).attr('href') || $(element).attr('src');

И что это даст? все равно же придется картинку обрамлять ссылкой, только теперь класс и рел на картинку? Вот если бы вообще картинку не обрамлять ссылкой...

 

[stwild]

нет, не надо будет обрамлять, можно просто в картинку прописать и всё будет работать ))