2

I'm using http://www.starplugins.com/cloudzoom/quickstart to add hover zoom feature on single product page. Rollover on first product thumbnail shows the same image. However on second or subsequent rollover of other images the rollover image is always the 1st image.

I really need some help on this issue. I've searched all over but cant find any solution.

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 initialize script

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
        });
    }
});
  • 3
    Although we're happy to help you I would recommend posting this on stackoverflow.com since it's more a jquery / plugin related question and I think you will get more response there – Sander Mangel May 22 '15 at 6:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.