gallery - 如何解决 elevatezoom 无法正常工作

Question

我是 laravel 的新手，我在我的画廊图片中使用了 elevatezoom。当我更改照片时，照片会更改，但提升缩放显示第一张图像。我该如何解决这个问题。

我的 html 代码在这里

 <div class="col-md-10" id="product-gallery-image" style="float: left">
    <img class="mainimage" id="zoom-product" src="{{url($product->thumbnail)}}"
         data-zoom-image="{{url($product->img)}}" style="max-width: 100%">
</div>


<div class="col-md-2" style="float: right;padding: 0" id="product_galery">
    <ul class="gallery-ul">
        <li data-image="{{url($product->thumbnail)}}" data-main-image="{{url($product->img)}}">
            <img src="{{url($product->thumbnail)}}"
                 style="width: 100%">
        </li>

        <li data-image="{{url($product->thumbnail1)}}" data-main-image="{{url($product->img1)}}">
            <img style="max-width: 100%"
                 src="{{url($product->thumbnail1)}}">
        </li>

        <li data-image="{{url($product->thumbnail2)}}" data-main-image="{{url($product->img2)}}">
            <img style="max-width: 100%"
                 src="{{url($product->thumbnail2)}}">
        </li>
    </ul>
</div>

和 jquery 代码在这里，

<script>
var productgalery = $('#product_galery');
var subnailproductgalery = productgalery.find('.gallery-ul li');

subnailproductgalery.click(function () {
    var index = $(this).index();
    var mainimageurl = $(this).attr('data-main-image');
    var thumbimageurl = $(this).attr('data-image');
    $('.gallery-ul li').removeClass('activeli');
    $(this).addClass('activeli');
    showgallery(mainimageurl, thumbimageurl);
})

function showgallery(imageurl, thumb) {
    var productgalleryimage = $('#product-gallery-image');
    productgalleryimage.find('.mainimage')
        .attr('src', thumb)
        .attr('data-zoom-image', imageurl)
        .elevateZoom();
}

$('#zoom-product').elevateZoom({
    'zoomWindowOffetx': -880,
    'zoomWindowWidth': 500,
});

标签： galleryelevatezoom