提升，缩放，激活和关闭点击？

Question

我正试图使elevate，变焦，jquery在单击而不是悬停时工作。我尝试过添加/删除类，但是我不知道如何在这种情况下加载带有延迟的jquery函数，我找到的所有帮助只是部分代码，没有冲突，所以我在这里非常迷惑。

我在上面发现的一件事是：

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

我是这样调整的：

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

这很管用..。激活它，对吧。但我需要在之后的点击中禁用它。怎么才能做到呢？

我通常使用这样的方法，来激活点击，简单的类添加，但是在这里我似乎无法让它工作，因为我不知道只有在类被添加之后，而不是之前，我才知道如何触发电梯缩放功能。

(我单击“激活/停用”按钮的示例)：

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

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

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

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

Answer 1

嗨，我刚从网站上下载了演示程序，并修改了代码如下：

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

   });
});

现在，这可以在单击上工作。所以我把你的代码放在这里。我希望这对你有用：

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

Answer 2

根据@Sahil的答案更新代码。避免在第一次单击之后重新启动elevateZoom会更有效。

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