jquery hide elevateZoom 1

jquery hide elevateZoom

$(document).ready(function(){

    $('#zoom_01').on('click', function(){

        if( $('.enabled').length === 0){
            $('.zoomContainer').show();
            $('#zoom_01').elevateZoom({
            zoomType: "inner",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
           }); 
            $(this).toggleClass('enabled');
        }
        else{
            $(this).toggleClass('enabled');
            $('.zoomContainer').hide();
        }

   });
});

Here is what the above code is Doing:
1. When the page loads, the zoomContainer is hidden.
2. When the user clicks on the image, the zoomContainer is shown and the image is zoomed in.
3. When the user clicks on the image again, the zoomContainer is hidden and the image is zoomed out.

The problem is that when the user clicks on the image again, the zoomContainer is hidden but the image is still zoomed in.

I’ve tried to use the zoomOut() function but it doesn’t work.

Any help would be appreciated.

A:

I think you need to remove the zoom from the image.
$('#zoom_01').removeData('elevateZoom');

Similar Posts