在Magento产品页使用jqZoom
来源:互联网 发布:软件开发工作怎么样 编辑:程序博客网 时间:2024/06/06 02:58
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">
- //<![CDATA[
- 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>
清除缓存,刷新前台页面,当鼠标悬浮在产品图片上时可以看到产品的放大图。
1 0
- 在Magento产品页使用jqZoom
- 在Magento产品页使用ColorBox 【magento二次开发】
- 在magento产品内页添加tab
- Magento 如何在产品页获取当前产品的销量
- magento产品页 产品加减
- Magento 产品页获取分类
- magento -- 如何在magento中实现产品的批量上传
- magento -- 如何在magento中进行产品的批量上传
- Jqzoom的使用
- 使用jqzoom插件时
- jqzoom使用简介
- 使用jqzoom插件时
- Magento热销产品Luxe_Bestsellers使用教程
- 如何在Magento中导入产品|Magento导入产品步骤【9.1】
- jqzoom
- Magento中在产品页中显示Custom Option中定义的SKU
- magento 产品页显示评论并分页
- magento代码调用分类页产品
- Android学习笔记(二)创建新Project及结构说明
- 用OpenSceneGraph实现的NeHe OpenGL教程 - 第四十八课
- LAMP 安装详解
- 利用cookie显示商品的浏览记录
- 行迁移和行链接详解
- 在Magento产品页使用jqZoom
- Spring MVC JSON自定义类型转换
- 子线程中如何调用对话框的变量和函数
- 新手刚用 vim 基本的操作命令
- Android学习笔记(三)Activity及Intent
- U盘中的文件无法删除导致在linux下无法挂载
- TCP/IP详解--滑动窗口与内核缓冲区之间的关系
- window对象的status、location、name、self、opener属性的使用
- C# 写日志的类文件