Question

如您所知，新的Magento RWD主题是在产品视图页面上使用提升缩放脚本来缩放和切换图像：magento demo product。

我想实施'Gallery＆amp;来自elevate-zoom example的灯箱选项。

我也尝试编辑media.phtml和app.js，但没有运气。

也许有人有解决方案吗？

谢谢，

维拉德

Answer 1

确保您安装了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>

您可能必须在更改media.phtml中的标记后应用css

Answer 2

这是 app.js

的正确代码

image.bind（＆＃34; click＆＃34;，function（e）{ var ez = image.data（＆＃39; elevateZoom＆＃39;）; image.fancybox（ez.getGalleryList（））; 返回false; }）;

在以下后添加：

image.elevateZoom（）;

Magento RWD主题 - 带图库和产品的产品图片灯箱选项

2 个答案: