Question

我正在使用jquery-zoom，我在我的网站上有一个产品有4个图像，当点击4个图像中的一个时，我希望主图像更改为点击的图像，并且仍可使用jquery-zoom进行缩放，现在每次点击不同的图像时，主图像都会更新到点击的图像，但它不再可缩放，只有当页面重新加载时它才可缩放...我应该如何实现我想要的效果？目前我的代码如下所示：

HTML：

<div class="product-main-image">
    <img id="product-zoomable-image"src="/images/image1.jpg" alt="无图片" class="img-responsive" data-BigImgsrc="/images/image1.jpg">
</div>
<div class="product-other-images">
    <a href="/images/image1.jpg" class="fancybox-button product-carousel-image" rel="photos-lib"><img alt="无图片" src="/images/image1.jpg"></a>
    <a href="/images/image2.jpg" class="fancybox-button product-carousel-image" rel="photos-lib"><img alt="无图片" src="/images/image2.jpg"></a>
    <a href="/images/image3.jpg" class="fancybox-button product-carousel-image" rel="photos-lib"><img alt="无图片" src="/images/image3.jpg"></a>
    <a href="/images/image4.jpg" class="fancybox-button product-carousel-image" rel="photos-lib"><img alt="无图片" src="/images/image4.jpg"></a>
</div>

使用Javascript：

$('.product-carousel-image').click(function(event) {        // change image shown as product image
    var newImageUrl = $(this).attr('href');
    console.log(newImageUrl)    ;
    $('#product-zoomable-image').attr('src', newImageUrl);
    $('#product-zoomable-image').trigger('zoom.destroy');
    $('#product-zoomable-image').zoom({url: newImageUrl});
});

Answer 1

我自己想出来，首先需要销毁zoomImg，然后创建另一个：

$('.product-carousel-image').click(function(event) {        // change image shown as product image
    var newImageUrl = $(this).attr('href');
    $('#product-zoomable-image').attr('src', newImageUrl);
    $('.product-main-image').trigger('zoom.destroy');
    $('.product-main-image').zoom({url: newImageUrl});
});

JQuery-zoom动态更改图像

1 个答案: