西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > magento教程 >

在Magento产品页使用jqZoom/产品放大

时间:2016-01-19 10:05来源: 作者: 点击:
Magento在产品页提供了一个简单的图片放大的功能,但效果不是很好,如果考虑使用放大镜来使用户查看产品的大图,可以考虑使用基于jQuery的插件,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">
 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>
清除缓存,刷新前台页面,当鼠标悬浮在产品图片上时可以看到产品的放大图。
(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容