javascript - jQuery lightGallery 切换缩略图

Question

jQuery lightGallery 给我留下了深刻的印象，使用起来很愉快。根据 lightGallery 网站上的第一个示例，带动画缩略图的画廊 ( http://sachinchoolur.github.io/lightGallery/examples.html )，我已将导航箭头移到两侧，但隐藏了缩略图。

#lg-gallery .thumb-cont .thumb-info {
    display: none;
}
#lg-action {
    position: static;
}
#lg-action a#lg-prev,
#lg-action a#lg-next {
    margin-top: -14px !important;
    position: absolute;
    top: 50%;
    z-index: 9999999;
    font-size: 18px;
}
#lg-action a#lg-prev {
    left: 18px;
}
#lg-action a#lg-next {
    right: 18px;
}

我已将打开的缩略图按钮移动到窗口右上角的画廊关闭按钮旁边，如下所示。

#lg-action a.cl-thumb {
    position: absolute;
    top: 18px;
    right: 50px;
    z-index: 9999999;
}

那么，如何使用拇指按钮为拇指连接打开/关闭开关？我想我需要查看 onOpen 回调，但我不确定如何使用它，也许是这样。

onOpen: function() {
    $("#lg-action a.cl-thumb").on("click", function(e) {
        e.preventDefault();
        if ($("#lg-gallery").hasClass("open")) {
            $("#lg-gallery .thumb-cont").slideDown();
            $("#lg-gallery").removeClass('open');
        }
        return false;
    });
}

这(显然)不起作用。

Answer 1

通过向 onOpen 回调添加一个函数解决了这个问题。当第一次单击拇指按钮时，我将一个名为“open-toggle”的类(并设置所需的 css)添加到#lg-gallery.open。第二次单击会从 #lg-gallery 中删除“open-toggle”和“open”类并重新设置 css。

onOpen: function() {
    $("#lg-action a.cl-thumb").on("click", function() {
        $gallery = $("#lg-gallery");
        if ($gallery.hasClass("open-toggle")) {
            $gallery.removeClass('open-toggle open');
            $("#lg-gallery .lg-slide").css("padding-bottom", "0");  
        }
        else {
            $gallery.addClass("open-toggle");
            $("#lg-gallery.open .lg-slide").css("padding-bottom", "120px");
        }
    });
}

编辑

我发现如果您切换拇指栏，图像不会挡道，但对于网站上的示例，它们确实会挡道。我打开 Firebug，发现网站示例页面有一个名为 base.css 的文件，其中包含以下行:

* { 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

}

我将这一行添加到我的 css 中并为 padding-bottom 设置了动画，以便在切换拇指时图像不会跳到合适的大小。

onOpen: function() {
    $("#lg-action a.cl-thumb").on("click", function() {
        $gallery = $("#lg-gallery");
        if ($gallery.hasClass("open-toggle")) {
            $("#lg-gallery .lg-slide").animate({ 
                "padding-bottom": 0 
            }, 500);    
            $gallery.removeClass('open-toggle open');
        }
        else {
            $("#lg-gallery.open .lg-slide").animate({ 
                "padding-bottom": 120 
            }, 500);
            $gallery.addClass("open-toggle");
        }
    });
}

无论如何，也许这会为某人指明正确的方向。