CloudZoom magento集成

Question

嗨，大家真的需要一些关于这个问题的帮助。我已经搜遍了所有但无法找到任何解决方案。

使用http://www.starplugins.com/cloudzoom/quickstart在单个商品页面上添加悬停缩放功能。第一个产品缩略图上的滚动显示相同的图像。但是，在其他图像的第二次或后续翻转时，翻转图像始终是第一张图像。

Media.phtml

<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_nativeZoom = false;
?>

<?php if (count($this->getGalleryImages()) > 0): ?>
    <div class="more-views">
        <?php /* <h2><?php echo $this->__('More Views') ?></h2> */ ?>
        <?php
        $galleryImages = $this->getGalleryImages();
        $numGalleryImages = count($galleryImages);
        $i = 0;
        foreach ($galleryImages as $_image): $i++; ?>
            <div class="<?php
                if($i == 1) {
                    echo 'first';
                }
                if($i == $numGalleryImages) {
                    echo 'last';
                }
                ?>">
                <a href="#" data-large-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
                   title="<?php echo $_product->getName();?>">
                    <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(124); ?>"
                         alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
                </a>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

<div id="main-image">
    <?php
    $_img = '<img class="cloudzoom" id="main-product-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(450).'" data-cloudzoom="zoomImage: \''.$this->helper('catalog/image')->init($_product, 'image').'\'" alt="'.$this->escapeHtml($_product->getImageLabel()).'" title="'.$this->escapeHtml($_product->getImageLabel()).'" />';
    echo $_helper->productAttribute($_product, $_img, 'image');
    ?>
</div>

<script type="text/javascript">
    jQuery('.more-views a').click(function(){
        jQuery('#main-product-image').attr('src', jQuery(this).attr('data-large-image'));
        return false;
    });
</script>

jquery初始化脚本

jQuery(document).ready(function($) {
    if (jQuery('.catalog-product-view').length) {

        if (window.location.hash == '#_reviews') {
            //add scroll to down to product reviews list when pagination is used
            jQuery.scrollTo(jQuery('#reviews'), {duration: 1000, interrupt: true});
        }

        //cloudzoom configuration http://www.starplugins.com/cloudzoom/quickstart
        $('#main-product-image').CloudZoom({
            tintColor: '#6e4d56',
            tintOpacity: 0.43,
            zoomSizeMode: 'image',
            autoInside: 1000
        });
    }
});