How to disable elevateZoom?

Question

How do i call the destroy function in elevateZoom ? The documentation does't have any mention of it , If i do a quick ctrl+f in the source, i see an option for disable , But i am 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 wish for the zoom functionality not to work(I am doing this to isolate my problem, Now please don't ask a counter question as to why the heck i am doing this). What do i do inside the setTimeout() that the elevateZoom becomes non-functional.

FIDDLE HERE

Ulick

Try the bottom solution here: github.com/elevateweb/elevatezoom/issues/8 – Confined

@ClaytonLeis will look into it , if its correct i'll tell u and you can add it as an answer ! – Ulick

Answer 1

Since Elevate Zoom does not have a native destroy, you'll have to do something like this:

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

This works for me. Hope this helps!

Briard

IMO, it'll be better to disable elevateZoom instead of destroying it, since it really doesn't have any nice solution for safely destroy it. See @Jasmeet Singh's solution. – Lamina

Answer 2

A much better solution is in-built into elevatezoom:

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

Alienage

I also had to hide the $('.zoomContainer') div since it was overlaid on something else – Endurable

Answer 3

You can use this. I needed to turn off the ElevatedZoom on Mobile Devices as Opencart has a Gallerybox and people can make the image bigger easily via the two finger swipe movement. So... this worked like a charm.

Its quiet simple. If you cant disable it, try to prevent it from starting in the first place under a condition that fits your needs. :-)

<script>
    if ($(window).width() > 769) { $('#zoom').elevateZoom(); }
</script>

Synodic

only you will have trouble when resizing to bigger window and then back to smaller – Distended

Answer 4

It just overlays a zooming div, so if you are temporarily seeking to disable it, just hide that overlaying window and then show it again later.

// Get rid of it
$('.zoomWindowContainer').hide();

// Return it later
$('.zoomWindowContainer').show();

Worked in my instance at least.

Nor

looks like not enough because using touch events like mobile scrolling is not working on images though the container is hidden – Distended