Bind a jquery image zoom effect to onclick

Question

I\'m using this plugin to enable an image zoom on my site:

http://www.elevateweb.co.uk/image-zoom/

I modified the code so that the magnifying glass only appe

Answer 1

There is no easy way around this, unless the plugin offers that functionality and method to stop or remove the plugin itself. You'll need to investigate what the plugin does, to reverse or unbind certain events and remove the elements that the plugin adds to the DOM.

To get this done easily, instead of removing the effects of the plugin, I would suggest you create a duplicate of the element in which you'll applied the plugin. You need to have two images, one with the plugin applied to it and just simply switch on them on click().

Sample html structure:

<div id="image-wrapper">
    <div id="image1-container">
        <img src"/images/my-image.jpg" alt="my-image" />
    </div>
    <div id="image2-container">
        <!-- this element will contain the image with 'elevateZoom' applied -->
        <img id="mainimage" src"/images/my-image.jpg" alt="my-image" /> 
    </div>
</div>

jQuery:

//apply the 'elevateZoom' plugin to the image
$("#mainimage").elevateZoom({
    zoomType: "lens",
    lensShape: "round",
    lensSize: 300
});

//on page load hide the container which plugin is applied 
$('#image2-container').hide();    

$("#image-wrapper").click(function () {
   // hide matched element if shown, shows if element is hidden
   $('#image1-container, #image2-container').toggle();    
});

---

Update:

I see there is a option for this and I believe you can call it this way:

$('#mainimage').elevateZoom({
    zoomEnabled: false
});

And you can enable and disable it on click() like this:

$('#mainimage').click(function () {
    /*class name 'zoomed' is just an indicator so we can determine if the image
     has been applied with elevateZoom */
    if($(this).hasClass('zoomed')){
        $(this).elevateZoom({
            zoomEnabled: false
        });
        $(this).removeClass('zoomed');            
    }else{
        $(this).elevateZoom({
            zoomType: "lens",
            lensShape: "round",
            lensSize: 300
        });
        $(this).addClass('zoomed');          
    }
});

However I noticed that setting zoomEnabled: false is not enough because it still passes through the whole init function which builds the elevateZoom components. And thus still creates an overlay element which is the zoomContainer.

You need to remove this element as well with $('.zoomContainer').remove();. I also think that just removing '.zoomContainer' is enough and you don't need to set zoomEnabled: false.

You can see the demo here: jsfiddle.net/vF95M/