jQuery lightGallery 切换缩略图答案

【问题标题】：jQuery lightGallery toggle thumbnailsjQuery lightGallery 切换缩略图
【发布时间】：2015-05-08 18:29:49
【问题描述】：

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

这（显然）不起作用。

【问题讨论】：

标签： javascript jquery css lightgallery

【解决方案1】：

通过向 onOpen 回调添加一个函数解决了这个问题。当第一次单击拇指按钮时，我向#lg-gallery.open 添加了一个名为“open-toggle”的类（并设置了所需的 css）。第二次单击会从#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 中并为填充底部设置动画，以便在切换拇指时图像不会跳转到大小。

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

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

【讨论】：