jquery - 带有 nextClick 的 fancybox 2 画廊 - 单击最终图像将其关闭

Question

我正在尝试fancybox 2，我已经删除了arrows、closebutton和loop，并启用了nextclick。我要超级干净且易于使用。

我现在遇到的问题是我点击了图库，但是当我点击最后一张幻灯片时，我希望它关闭，但它没有 - 点击图片没有任何作用。

我的猜测是答案是通过类添加一个自关闭动作，如下所示：

<a class="gallery1 closeaction" href=...

但我真的不知道。我认为这种东西会在演示中，但我找不到类似的东西。

帮助？

Answer 1

这段使用beforeShow回调的代码应该可以解决问题：

$(document).ready(function() {
    $(".fancybox").fancybox({
        arrows: false,
        closeBtn: false,
        loop: false,
        nextClick: true,
        beforeShow: function() {
            var groupLength = this.group.length;
            var thisIndex = this.index + 2; // index starts at "0"
            $(".fancybox-image").on("click", function() {
                if (thisIndex > groupLength) {
                    $.fancybox.close();
                } else {
                    thisIndex++;
                }
            });
        }
    }); // fancybox
}); // ready

见演示

Answer 2

也许像绑定点击画廊中的最后一个项目

$('.fancylink').fancybox({
loop: false,
afterShow: function(){          
    if(this.index  == this.group.length - 1){

        $('.fancyselector').click(function(){
$.fancybox.close(); }); // or :
nextClick :false;
closeClick :true;
    }
}
});

Answer 3

如果您使用 fancybox 版本。3、可以使用这段代码

    $('.fancybox').fancybox({
        clickContent: function(current, event) {
            var sliderCount = $('.fancybox-infobar span[data-fancybox-count]').text();
            var sliderPosition = current.pos + 1;
            if(sliderPosition < sliderCount){
                return current.type === "image" ? "nextOrClose" : false;
            } else{
                return current.type === "image" ? "close" : false;
            }

        },
    });