在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>

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

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