Opencart - Fancybox (или Colorbox)+"cloud-zoom" Одновременно.значок-ссылка Поверх Изображения Товара

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 24 июн 2016.

  1. TopicStarter Overlay
    Online

    admin Команда форума Администратор

    Сообщения:
    2.321
    Симпатии:
    76.219
    Репутация:
    170
    Накладываем в OpenCart (1.5.1.3, 1.5.4, ...) на картинку товара значок "просмотр в полном размере" с эффектом fancybox. Возможно, более понятно сказать - настройка эффектов cloud-zoom и fancybox одновременно.

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

    opencart-fancybox-and-cloud-zoom.png

    Эффект fancybox.

    opencart-fancybox-and-cloud-zoom-1.png

    Эффект 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 с полным изображением для товара.