１下载jqzoom

点击下载

2配置

1. 解压jqzoom后，将jquery-1.3.2.min.js和jqzoom.pack.1.0.1.js复制到/skin/frontend/包/主题/js/　目录下面
2. 将jqzoom.css复制到/skin/frontend/包/主题/css/　目录下面
3. 修改任何一个模块的layout文件。增加下面内容:

   <catalog_product_view>
       <reference name="head">
           <action method="addCss"><stylesheet>css/jqzoom.css</stylesheet></action>
   	<action method="addItem"><type>skin_js</type><name>js/jquery-1.3.2.min.js</name></action>
           <action method="addItem"><type>skin_js</type><name>js/jqzoom.pack.1.0.1.js</name></action>            
      </reference>
   </catalog_product_view>

4. 修改/app/design/frontend//包/主题/catalog/product/view/media.phtml,在显示大图位置修改为：

   <a target="_blank" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" id="bigimage" alt="<?php echo $this->htmlEscape($_product->getName()) ?>">
      <img width="364px" height="485px" id="middleimage" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(364, 485); ?>" title="IMAGE TITLE"  >
   </a>

   
   
   并在该文件中增加js如下：

   jQuery.noConflict();
   jQuery(document).ready(function(){
   	var options = {
   	    zoomWidth: 300,
   	    zoomHeight: 250,
               xOffset: 10,
               yOffset: 110,
               preloadText:"正在下载大图...",//it's useful when preloadImages:true
               title:false,
               preloadImages:false,
               position: "right" //and MORE OPTIONS
   	};
   	jQuery("#bigimage").jqzoom(options);
   });
    
   function jSelectImage(normalURL,enlargeURL) {	
   	jQuery("#middleimage").attr("src",normalURL);	
   	jQuery("#bigimage").attr("href",enlargeURL);
   }

３相关参考

1. jqzoom:http://www.mind-projects.it/jqzoom_v10
2. js压缩YUI Compressor:http://developer.yahoo.com/yui/compressor/

修改jquery.jqzoom1.0.1.js第90行，注释它，这样可以使要放大的图，在点击时在新窗口打开大图。
注释130–148行，并在149行加上

这样，在变换小图时，大图重新加载。
{zh1}使用yui-compressor压缩js，命令是
java -jar yuicompressor-2.4.2.jar abc.js -o a.js