Тема Magento RWD - изображения продуктов с галереей и опцией лайтбокса

Как вы знаете, новая тема Magento RWD использует скрипт elevate-zoom на странице просмотра продукта для масштабирования и переключения изображений: демонстрационный продукт magento.

Я хотел бы реализовать опцию «Галерея и лайтбокс» из примера elevate-zoom.

Я также пытался редактировать media.phtml и app.js, но безуспешно.

Может быть, у кого-то есть решение для этого?

Спасибо,

Влад


image-gallery lightbox magento-1.9
person Vladimir Mihailovic    schedule 10.09.2014    source источник

Ответы (2)


arrow_upward
-1
arrow_downward

Убедитесь, что у вас установлен плагин fancybox вместе со всеми зависимостями, например, колесиком мыши.

Лучше всего включить их в свой файл local.xml (app/design/frontend/YOUR_PACKAGE/YOUR_THEME/layout/local.xml), например:

    <?xml version="1.0"?>    


<catalog_product_view>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.mousewheel-3.0.4.pack.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.fancybox-1.3.4.patch.js</name></action>
        <action method="addItem"><type>skin_css</type><name>js/fancybox/jquery.fancybox-1.3.4.css</name></action>
    </reference>
</catalog_product_view>

Скопируйте app.js в свою тему (с сохранением структуры каталогов), затем добавьте/отредактируйте следующее:

image.elevateZoom({
        gallery:'gallery_01',
        cursor: 'pointer',
        galleryActiveClass: 'active',
        imageCrossfade: true,
        loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
    });

Скопируйте media.phtml в свою тему (с сохранением структуры каталогов), чтобы он использовал содержащий div для группы галереи, за которым сразу же следовали теги привязки, содержащие необходимые атрибуты данных, как показано ниже (примерно из строки 67):

<div class="more-views">
    <div class="product-image-thumbs" id="gallery_01">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
    <?php
    if (($filterClass = $this->getGalleryFilterHelper()) && ($filterMethod = $this->getGalleryFilterMethod()) && !Mage::helper($filterClass)->$filterMethod($_product, $_image)):
        continue;
    endif;
    ?>

    <?php $galImg = $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(800); ?>
    <a class="thumb-link" href="#" data-image="<?php echo $galImg; ?>" data-zoom-image="<?php echo $galImg; ?>">
        <img id="img_<?php echo $i; ?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
             width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
    </a>
<?php $i++; endforeach; ?>
</div>

You will probably have to apply css after changing the markup within media.phtml

person Karma Kaos    schedule 21.11.2014
comment
Tnx. Я постараюсь и дам вам знать, если это работает. Спасибо еще раз. - person Vladimir Mihailovic; 23.11.2014

arrow_upward
-1
arrow_downward

Это правильный код для app.js.

image.bind("щелчок", function(e) { var ez = image.data('elevateZoom'); image.fancybox(ez.getGalleryList()); return false; });

Добавьте это после:

изображение.elevateZoom();

person loeffel    schedule 20.02.2015