在Magento产品页面的使用jqZoom

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>

清除缓存。刷新头版。当鼠标悬停在产品形象，看产品的放大图。

版权声明：本文博客原创文章。博客，未经同意，不得转载。