javascript - 如何替换 elevatezoom 图像

Question

目前我正在使用 elevatezoom 来缩放我的产品图片。它是一个基本的缩放功能。我有一个大图像，其他图像很小。我为此写了一个代码。当您单击小图像时，它会替换为大图像。它已正确更改，但是当我将鼠标悬停在该图像缩放功能上时无法正常工作，请在此处编写我的代码，您能帮帮我吗？

html代码是

<div class="col-xs-12 col-lg-12"> 
    <img id="main_img" class="img-responsive" src="<?=BASE?>/uploaded_content/product/products_speedboot.jpg" data-zoom-image="<?=BASE?>/uploaded_content/product/products_speedboot.jpg"/>
</div>
<div class="col-lg-12 margin-top-10class other-pic-gallary">
    <div class="col-lg-4 padding-remove-left"><img class="img-thumbnail" src="<?=BASE?>/uploaded_content/product/products_speedboot.jpg" /></div>
    <div class="col-lg-4 padding-remove-left"><img class="img-thumbnail" src="<?=BASE?>/uploaded_content/product/Sports_Equipment_Fittings.jpg" /></div>
    <div class="col-lg-4 padding-remove-left"><img class="img-thumbnail" src="<?=BASE?>/uploaded_content/product/products_speedboot.jpg" /></div>
</div>

脚本代码

$(document).ready(function(){
    $('#main_img').elevateZoom({
        zoomType: "inner",
        cursor: "crosshair",
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 750
    });

    $('body').on('click','.other-pic-gallary .img-thumbnail',function(){
        //console.log($(this).attr('src'));
        var img_val = $(this).attr('src');
        $('#main_img').attr('src',img_val);
        $('#main_img').attr('data-zoom-image',img_val);
        $('.zoomWindowContainer div').stop().css("background-image","url("+ img_val +")");
        $('#main_img').elevateZoom({
            zoomType: "inner",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });

    });
});

Answer 1

我已经在FIDDLE 中为您制作了演示。

image.on('click', function(){
    // Remove old instance od EZ
    $('.zoomContainer').remove();
    zoomImage.removeData('elevateZoom');
    // Update source for images
    zoomImage.attr('src', $(this).data('image'));
    zoomImage.data('zoom-image', $(this).data('zoom-image'));
    // Reinitialize EZ
    zoomImage.elevateZoom(zoomConfig);
});