在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="‘.$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>

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

在Magento产品页使用jqZoom