click - Bind a jquery image zoom effect to onclick -

i'm using plugin enable image zoom on site:

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

i modified code magnifying glass appears when click image (the mouse cursor magnifying glass when hover on image suggest can click zoom). code looks following:

    $("#mainimage").click(function() {     $("#mainimage").elevatezoom({         zoomtype: "lens",         lensshape: "round",         lenssize: 300         });     }); 

this code works fine. i'd remove zoom effect on click. code try , write doesn't work... suggestions?

thanks!

edit:

i found github note seems suggest there's changestate function:

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

but i'm having trouble using without documentation...

right have (just 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 work fine - when click image zoom function, when click other (random) div destroys zoom function. can't figure out how toggle enable/disable changestate function on click of image?

thanks!

there no easy way around this, unless plugin offers functionality , method stop or remove plugin itself. you'll need investigate plugin does, reverse or unbind events , remove elements plugin adds dom.

to done easily, instead of removing effects of plugin, suggest create duplicate of element in you'll applied plugin. need have 2 images, 1 plugin applied , 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">         <!-- element contain image 'elevatezoom' applied -->         <img id="mainimage" src"/images/my-image.jpg" alt="my-image" />      </div> </div> 

jquery:

//apply 'elevatezoom' plugin image $("#mainimage").elevatezoom({     zoomtype: "lens",     lensshape: "round",     lenssize: 300 });  //on page load hide container plugin applied  $('#image2-container').hide();      $("#image-wrapper").click(function () {    // hide matched element if shown, shows if element hidden    $('#image1-container, #image2-container').toggle();     }); 

---

update:

i see there option , believe can call way:

$('#mainimage').elevatezoom({     zoomenabled: false }); 

and can enable , disable on click() this:

$('#mainimage').click(function () {     /*class name 'zoomed' indicator can determine if image      has been applied 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 noticed setting zoomenabled: false not enough because still passes through whole init function builds elevatezoom components. , still creates overlay element zoomcontainer.

you need remove element $('.zoomcontainer').remove();. think removing '.zoomcontainer' enough , don't need set zoomenabled: false.

you can see demo here: jsfiddle.net/vf95m/