How to change data-zoom-image value

Question

I'm using elevate zoom effects for zooming facility of image, my image tag is:

<img id="zoom_01"
 src='New folder/small/image.jpg'
 data-zoom-image="New folder/large/image.jpg">

and elevatezoom script is:

<script>
    $("#zoom_01").elevateZoom({scrollZoom : true});
</script>

I have many images that I want to zoom, with same id,src value is changing but I couldn't change data-zoom-image value.How do change data-zoom-image value,you can also visit any [e coomerce website]that what I'm trying to tell.1

Answer 1

After change of data zoom-image attribute, you need to re-initialize with elevateZoom like this:

$("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
   responsive: true,
   zoomType: "lens", 
   containLensZoom: true
}); 

Answer 2

If you want change image which shown as zoomed, simply do this

$('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");