Magento RWD 主题 - 带有画廊和灯箱选项的产品图片答案

【问题标题】：Magento RWD theme - Product images with gallery & lightbox optionMagento RWD 主题 - 带有画廊和灯箱选项的产品图片
【发布时间】：2014-09-10 14:54:36
【问题描述】：

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

我想从elevate-zoom example 实施“画廊和灯箱”选项。

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

也许有人对此有解决方案？

谢谢，

弗拉德

【问题讨论】：

标签： lightbox image-gallery magento-1.9

【解决方案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

【讨论】：

Tnx。我会尝试让你知道它是否有效。再次感谢。

【解决方案2】：

这是 app.js

的正确代码

image.bind("点击", function(e) { var ez = image.data('elevateZoom'); image.fancybox(ez.getGalleryList()); 返回假； });

在后面添加：

image.elevateZoom();

【讨论】：