elevate zoom activate and deactivate on click?

Question

I'm trying to make elevate zoom jquery work on click instead of hover. I have tried to add/remove class, but I don't know how to load a jquery function with deferred in such situation, all the help I find is only partial code and all not on no conflict so I am very lost here.

One of the things I found on SO was:

    $("button").click(function () {
    var imgUrl = $(this).data('rel');
    $("#area").html("<img class='test' src='" + imgUrl + "' data-zoom-image='" + imgUrl + "' />").hide().imagesLoaded(function () {
        $(this).fadeIn(500, function() {
            $(".test").elevateZoom({
                zoomType: "inner",
                cursor: "crosshair"
            });         
        });
    });
});

I have adjusted it like this:

 (function($)
{
$(document).ready(function () {
    $("#zoom_01").click(function () {
            $(this).fadeIn(500, function() {
                $("#zoom_01").elevateZoom({
                    zoomType: "inner",
                    cursor: "crosshair"
                });         
            });
    });
});
})(jQuery);

and that works... to activate it, right. But I need to deactivate it with the click afterwards. How would one do that?

I usually use something like this, for activating clicks, simple class add but I can't seem to make this work here because I don't know how to trigger the elevate zoom function only after the class is added and not before.

(a lightbox example of how I do click activate/deactivate):

(function($)
{
$(".lightbox_clicker").click(function() {

  $(this).addClass("lightboxblur");
});

$(".lightbox").click(function() {

  $(".lightbox_clicker").removeClass("lightboxblur");
});
})(jQuery);

Answer 1

Updated code based on @Sahil's answer. It'd be more efficient to avoid re-initiating elevateZoom after the first click.

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

Answer 2

Hi I just downloaded the demo from the website, and changed the code like this:

$(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();
        }

   });
});

Now this works on click. So I am placing your code like this. I hope this works for you:

(function($){
$(document).ready(function () {

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

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

       });
});

})(jQuery);