提升缩放在单击时激活和停用？

Question

我正在尝试让提升缩放 jquery 在单击而不是悬停时起作用。我试过 add/remove class，但我不知道如何在这种情况下加载延迟的 jquery 函数，我找到的所有帮助都只是部分代码，而且都没有没有冲突，所以我在这里很迷路。

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

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

那行得通……激活它，对吧。但是之后我需要通过单击将其停用。怎么做到的？

我通常使用类似这样的东西来激活点击，简单 class 添加但我似乎无法在这里工作，因为我不知道如何仅在class 是添加的而不是之前的。

（我如何点击 activate/deactivate 的灯箱示例）：

(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 的回答更新了代码。在第一次点击后避免 re-initiating 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();
  }
});

提升缩放在单击时激活和停用？

elevate zoom activate and deactivate on click?

jquery

function

click

deferred