在Magento产品页使用jqZoom

Magento在产品页提供了一个简单的图片放大的功能，但效果不是很好，如果考虑使用放大镜来使用户查看产品的大图，可以考虑使用基于jQuery的插件，便是一款优秀的放大镜插件，下面将介绍怎样把jqzoom集成到Magento中。

1 加载jQuery

因为jqZoom是基于jQuery的插件，所以我们需要在Magento中加载jQuery库，并下载jqZoom文件包，放在网站的根目录的js目录下，比如/js/jqzoom

2 建立模块

作为例子，我们在/app/code/local/MagentoBoy/Jqzoom目录下新建一个模块MagentoBoy_Jqzoom，并添加模块文件：

/app/etc/modules/MagentoBoy_Jqzoom.xml

<?xml version="1.0"?>
<config>
    <modules>
        <MagentoBoy_Jqzoom>
            <active>true</active>
            <codePool>local</codePool>
        </MagentoBoy_Jqzoom>
    </modules>
</config>

并添加配置文件

/app/code/local/MagentoBoy/Jqzoom/etc/config.xml

<?xml version="1.0"?>
<config>
    <modules>
        <MagentoBoy_Jqzoom>
            <version>0.1.0</version>
        </MagentoBoy_Jqzoom>
    </modules>
</config>

3 添加Layout文件

/app/design/frontend/default/default/layout/jqzoom.xml

<?xml version="1.0"?>
<layout>
    <catalog_product_view>
        <reference name="head">
            <action method="addItem"><type>js</type><name>jqzoom/js/jquery.jqzoom-core.js</name></action>
            <action method="addItem"><type>js_css</type><name>jqzoom/css/jquery.jqzoom.css</name></action>
        </reference>
        <reference name="product.info.media">
            <action method="setTemplate"><template>jqzoom/media.phtml</template></action>
        </reference>
    </catalog_product_view>
    <review_product_list>
        <reference name="head">
            <action method="addItem"><type>js</type><name>jqzoom/js/jquery.jqzoom-core.js</name></action>
            <action method="addItem"><type>js_css</type><name>jqzoom/css/jquery.jqzoom.css</name></action>
        </reference>
        <reference name="product.info.media">
            <action method="setTemplate"><template>jqzoom/media.phtml</template></action>
            <action method="disableGallery"/>
        </reference>
    </review_product_list>
</layout>

并在config.xml中添加layout文件

<config>
    <frontend>
        <layout>
            <updates>
                <jqzoom>
                    <file>jqzoom.xml</file>
                </jqzoom>
            </updates>
        </layout>
    </frontend>
</config>

4 修改template文件

/app/design/frontend/default/default/template/jqzoom/media.phtml

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<p class="product-image">
    <a href="helper('catalog/image')->init($_product, 'image');?>" class="jqzoom" rel="gal1" title="htmlEscape($this->getImageLabel());?>">
        <img id="image" src="init($_product, 'thumbnail')->resize(265);?>" alt="htmlEscape($this->getImageLabel());?>" title="htmlEscape($this->getImageLabel());?>" style="width:265px;" />
    </a>
</p>

<p class="zoom-notice" id="track_hint"><?php echo $this->__('Hover on image to zoom in the picture') ?></p>

<?php else: ?>
<p class="product-image">
    <?php
        $_img = '.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</p>
<?php endif; ?>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <h2><?php echo $this->__('More Views') ?></h2>
    <ul>
        <li>
            <a class="zoomThumbActive" href="javascript:void(0);" rel="{gallery:'gal1', smallimage:'init($_product, 'thumbnail')->resize(265);?>', largeimage:'helper('catalog/image')->init($_product, 'image');?>'}" title="htmlEscape($this->getImageLabel());?>"><img src="init($_product, 'thumbnail')->resize(56);?>" width="56" height="56" alt="htmlEscape($this->getImageLabel());?>" /></a>
        </li>
    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="javascript:void(0);" rel="{gallery:'gal1', smallimage:'init($_product, 'thumbnail', $_image->getFile())->resize(265);?>', largeimage:'helper('catalog/image')->init($_product, 'image', $_image->getFile());?>'}" title="htmlEscape($this->getImageLabel());?>"><img src="init($_product, 'thumbnail', $_image->getFile())->resize(56);?>" width="56" height="56" alt="htmlEscape($this->getImageLabel());?>" /></a>
        </li>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>
<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
$j(document).ready(function(){
    $j('.jqzoom').jqzoom({
        'zoomWidth'     : 300,
        'zoomHeight'    : 300,
        'xOffset'       : 10,
        'yOffset'       : 0,
        'position'      : 'right',
        'preloadImages' : true,
        'preloadText'   : 'Loading zoom',
        'title'         : true,
        'lens'          : true,
        'imageOpacity'  : '0.4',
        'showEffect'    : 'show',
        'hideEffect'    : 'hide',
        'fadeinSpeed'   : 'slow',
        'fadeoutSpeed'  : '2000'
    });
});
//]]>
</script>

清除缓存，刷新前台页面，当鼠标悬浮在产品图片上时可以看到产品的放大图。