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 appears when you click the image (the mouse cursor is a magnifying glass when you hover over the image to suggest that you can click to zoom). The code looks like the following:

    $("#mainimage").click(function() {
    $("#mainimage").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 300
        });
    });

This code works fine. But what I'd like to do is also remove the zoom effect on click. Any code I try and write doesn't work... Any suggestions?

Thanks!

EDIT:

I found this github note that seems to suggest there's a changeState function:

https://github.com/elevateweb/elevatezoom/commit/81c2cc4946f6bebc33c0d8e804b046b36fa1bc61

But I'm having trouble using it without documentation...

Right now I have something like this (just to test it):

    $("#mainimage").click(function() {
    $("#mainimage").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 300
    });
});



$('.productbioimage').click(function(){
    var ez =   $('#mainimage').data('elevateZoom');    
    ez.changeState('disable');
});

This seems to work fine - when I click the image I get the zoom function, when I click this other (random) div it destroys the zoom function. But I can't figure out how to toggle the enable/disable changeState function on click of the image?

Thanks!

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/