Question

我试图通过点击而不是悬停来提升缩放jquery工作。我试图添加/删除类，但我不知道如何在这种情况下加载延迟的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);

这是有效的...激活它，对吧。但是我需要在之后点击停用它。如何做到这一点？

我经常使用这样的东西，用于激活点击，简单的课程添加，但我似乎无法在这里工作，因为我不知道如何在课程结束后触发提升缩放功能添加，而不是之前。

（如何点击激活/停用的灯箱示例）：

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

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

2 个答案: