Как заменить изображение 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); 
});