在Magento产品页面的使用jqZoom
-
<?
xml version="1.0"?>
-
<config>
-
<modules>
-
<MagentoBoy_Jqzoom>
-
<active>true</active>
-
<codePool>local</codePool>
-
</MagentoBoy_Jqzoom>
-
</modules>
- </config>
-
<?xml version="1.0"?>
-
<config>
-
<modules>
-
<MagentoBoy_Jqzoom>
-
<version>0.1.0</version>
-
</MagentoBoy_Jqzoom>
-
</modules>
- </config>
-
<?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>
-
<frontend>
-
<layout>
-
<updates>
-
<jqzoom>
-
<file>jqzoom.xml</file>
-
</jqzoom>
-
</updates>
-
</layout>
-
</frontend>
- </config>
-
<?
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>
版权声明:本文博客原创文章。博客,未经同意,不得转载。