首页 > 代码库 > 在Magento产品页使用jqZoom

在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
  1. <?xml version="1.0"?>
  2. <config>
  3.     <modules>
  4.         <MagentoBoy_Jqzoom>
  5.             <active>true</active>
  6.             <codePool>local</codePool>
  7.         </MagentoBoy_Jqzoom>
  8.     </modules>
  9. </config>
并添加配置文件
/app/code/local/MagentoBoy/Jqzoom/etc/config.xml
  1. <?xml version="1.0"?>
  2. <config>
  3.     <modules>
  4.         <MagentoBoy_Jqzoom>
  5.             <version>0.1.0</version>
  6.         </MagentoBoy_Jqzoom>
  7.     </modules>
  8. </config>

3 添加Layout文件
/app/design/frontend/default/default/layout/jqzoom.xml
  1. <?xml version="1.0"?>
  2. <layout>
  3.     <catalog_product_view>
  4.         <reference name="head">
  5.             <action method="addItem"><type>js</type><name>jqzoom/js/jquery.jqzoom-core.js</name></action>
  6.             <action method="addItem"><type>js_css</type><name>jqzoom/css/jquery.jqzoom.css</name></action>
  7.         </reference>
  8.         <reference name="product.info.media">
  9.             <action method="setTemplate"><template>jqzoom/media.phtml</template></action>
  10.         </reference>
  11.     </catalog_product_view>
  12.     <review_product_list>
  13.         <reference name="head">
  14.             <action method="addItem"><type>js</type><name>jqzoom/js/jquery.jqzoom-core.js</name></action>
  15.             <action method="addItem"><type>js_css</type><name>jqzoom/css/jquery.jqzoom.css</name></action>
  16.         </reference>
  17.         <reference name="product.info.media">
  18.             <action method="setTemplate"><template>jqzoom/media.phtml</template></action>
  19.             <action method="disableGallery"/>
  20.         </reference>
  21.     </review_product_list>
  22. </layout>
并在config.xml中添加layout文件
  1. <config>
  2.     <frontend>
  3.         <layout>
  4.             <updates>
  5.                 <jqzoom>
  6.                     <file>jqzoom.xml</file>
  7.                 </jqzoom>
  8.             </updates>
  9.         </layout>
  10.     </frontend>
  11. </config>

4 修改template文件
/app/design/frontend/default/default/template/jqzoom/media.phtml
  1. <?php
  2.     $_product = $this->getProduct();
  3.     $_helper = $this->helper(‘catalog/output‘);
  4. ?>
  5. <?php if ($_product->getImage() != ‘no_selection‘ && $_product->getImage()): ?>

  6. <p class="product-image">
  7.     <a href="<?php echo $this->helper(‘catalog/image‘)->init($_product, ‘image‘);?>" class="jqzoom" rel="gal1" title="<?php echo $this->htmlEscape($this->getImageLabel());?>">
  8.         <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;" />
  9.     </a>
  10. </p>

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

  12. <?php else: ?>
  13. <p class="product-image">
  14.     <?php
  15.         $_img = ‘<img src=http://www.mamicode.com/"‘.$this->helper(‘catalog/image‘)->init($_product, ‘image‘)->resize(265).‘" alt="‘.$this->htmlEscape($this->getImageLabel()).‘" title="‘.$this->htmlEscape($this->getImageLabel()).‘" />‘;
  16.         echo $_helper->productAttribute($_product, $_img, ‘image‘);
  17.     ?>
  18. </p>
  19. <?php endif; ?>

  20. <?php if (count($this->getGalleryImages()) > 0): ?>
  21. <div class="more-views">
  22.     <h2><?php echo $this->__(‘More Views‘) ?></h2>
  23.     <ul>
  24.         <li>
  25.             <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>
  26.         </li>
  27.     <?php foreach ($this->getGalleryImages() as $_image): ?>
  28.         <li>
  29.             <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>
  30.         </li>
  31.     <?php endforeach; ?>
  32.     </ul>
  33. </div>
  34. <?php endif; ?>
  35. <script type="text/javascript">
  36. //<![CDATA[
  37. var $j = jQuery.noConflict();
  38. $j(document).ready(function(){
  39.     $j(‘.jqzoom‘).jqzoom({
  40.         ‘zoomWidth‘ : 300,
  41.         ‘zoomHeight‘ : 300,
  42.         ‘xOffset‘ : 10,
  43.         ‘yOffset‘ : 0,
  44.         ‘position‘ : ‘right‘,
  45.         ‘preloadImages‘ : true,
  46.         ‘preloadText‘ : ‘Loading zoom‘,
  47.         ‘title‘ : true,
  48.         ‘lens‘ : true,
  49.         ‘imageOpacity‘ : ‘0.4‘,
  50.         ‘showEffect‘ : ‘show‘,
  51.         ‘hideEffect‘ : ‘hide‘,
  52.         ‘fadeinSpeed‘ : ‘slow‘,
  53.         ‘fadeoutSpeed‘ : ‘2000‘
  54.     });
  55. });
  56. //]]>
  57. </script>

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