OpenCart: Fancybox (или colorbox)+"cloud-zoom" одновременно. Значок-ссылка поверх изображения товара на просмотр в полный вид

OpenCart: Fancybox (или colorbox)+"cloud-zoom" одновременно. Значок-ссылка поверх изображения товара на просмотр в полный вид Накладываем в OpenCart (1.5.1.3, 1.5.4, ...) на картинку товара значок "просмотр в полном размере" с эффектом fancybox. Возможно, более понятно сказать - настройка эффектов cloud-zoom и fancybox одновременно.

По умолчанию в OpenCart 1.5.1.3 использовался эффект fancybox для открытия картинки в увеличенном виде. Это не совсем гладко выглядело, потому что, имея несколько изображений, приходилось закрывать открытое изображение. Поэтому стал популярен эффект cloud-zoom. Он затмевал собой эффект fancybox, но в то же время мне хотелось оставить и его.

Opencart Fancybox и cloud-zoom при просмотре изображения товара

Эффект fancybox.

Эффект cloud-zoom в Opencart одновременно с fancybox

Эффект cloud-zoom.

И вот решение. Поместить в уголок ненавязчивый значок "просмотреть изобоажение товара полностью", при нажатии на который и открывается полная картинка товара. В последней версии Opencart 1.5.4 вместо fancybox разработчики использовали другую библиотеку - colorbox (возможно она легче или красивее, если кто-то знает точно почему - расскажите). Но сути метода это изменение не затрагивает.

В виде product.tpl примерно на 13 строке вставляем одну строку (слой значка полного просмотра)

 

...
<div class="product-info">
    <?php if ($thumb || $images) { ?>
    <div class="left">
 <a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="fancybox image_colorbox" rel="fancybox"></a>  
      <?php if ($thumb) { ?>
...

Дальше в вашем конкретном случае смотрите css атрибуты z-index слоёв. Надо установить так, чтобы самым верхним был слой значка, но ещё выше всех был слой окошка fancybox с полным изображением для товара.

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (1)     Подпишитесь на RSS комментариев к этой статье.

1 комментарий

#892
Игорь говорит:
June 3, 2013 at 05:31 am
Хорошее решение. Как сделать так что бы при открытии фото в полный размер прокручивались еще и дополнительные фото????