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

参见 DEMO

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 ver。 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;
            }

        },
    });

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

3 个答案: