在Magento产品页使用jqZoom_magento教程_php教程

Magento在产品页提供了一个简单的图片放大的功能，但效果不是很好，如果考虑使用放大镜来使用户查看产品的大图，可以考虑使用基于jQuery的插件，jqZoom便是一款优秀的放大镜插件，下面将介绍怎样把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="<?php echo $this->helper('catalog/image')->init($_product, 'image');?>" class="jqzoom" rel="gal1" title="<?php echo $this->htmlEscape($this->getImageLabel());?>">

				        <img id="image" src="<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(265);?>" alt="<?php echo $this->htmlEscape($this->getImageLabel());?>" title="<?php echo $this->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 = '<img src="'.$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:'<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(265);?>', largeimage:'<?php echo $this->helper('catalog/image')->init($_product, 'image');?>'}" title="<?php echo $this->htmlEscape($this->getImageLabel());?>"><img src="<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(56);?>" width="56" height="56" alt="<?php echo $this->htmlEscape($this->getImageLabel());?>" /></a>

				        </li>

				    <?php foreach ($this->getGalleryImages() as $_image): ?>

				        <li>

				            <a href="javascript:void(0);" rel="{gallery:'gal1', smallimage:'<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(265);?>', largeimage:'<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile());?>'}" title="<?php echo $this->htmlEscape($this->getImageLabel());?>"><img src="<?php echo Mage::helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(56);?>" width="56" height="56" alt="<?php echo $this->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>

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

(责任编辑：好模板)