How to disable ElevateZoom?

Question

How to call destroy function in elevateZoom ? There is no mention of this in the documentation, if I quickly ctrl+f in source , I see an option for disable , but I'm not sure how to disable or destroy ElevateZoom?

I have the following code:

HTML:

 <img id="img_01" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" data-zoom-image="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg"/> 

JS:

  $("img").elevateZoom({ zoomType : "inner", cursor: "crosshair" , easing : true }); setTimeout(function(){} // how to destroy elevateZoom on image ? ,2000); 

Now, after 3 seconds, I want the zoom function to not work (I am doing this to isolate my problem, now please do not ask the counter question about why I am doing this). What am I doing inside setTimeout() that elevateZoom becomes non-functional.

FIDDLE HERE

Answer 1

Since Elevate Zoom does not have its own destruction, you need to do something like this:

 setTimeout(function(){ $.removeData($('img'), 'elevateZoom'); $('.zoomContainer').remove(); },2000); 

This works for me. Hope this helps!

Answer 2

The best solution is built into elevatezoom:

 var ezApi = $('#primaryImage').data('elevateZoom'); ezApi.changeState('disable');