fancybox 2 gallery with nextClick - clicking final image closes it

Question

i'm trying out fancybox 2, and i've removed the arrows, closebutton, and loop, and enabled nextclick. i'm going for super clean and easy to use.

the problem i'm having now is that I click through the gallery, but when I click the last slide i expect it to close, and it doesn't - clicking the image doesn't do anything.

my guess is the answer is either adding a self-close action via class, like this:

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

but i really have no idea. i'd think this kind of thing would be in a demo, but i can't find anything like it.

help?

JFK · Accepted Answer · 2012-12-20T20:21:48.630

This code using the beforeShow callback should do the trick :

$(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

See DEMO

score 1 · Answer 2 · answered Dec 20 '12 at 10:24

1

Maybe Something like bind click with last item in gallery

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

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

answered Dec 20 '12 at 10:24

john Smith

17,409
11
76
117

thanks for the reply. that made the last item in the gallery close immediately, not onclick. – user1918417 Dec 20 '12 at 10:30
1

did you try only nextClick :false; closeClick :true; – john Smith Dec 20 '12 at 10:38
1

Ah, the right callback is ofcourse not afterShow but afterLoad – john Smith Dec 20 '12 at 10:39
still not working for me... maybe there's something wrong with if logic? – user1918417 Dec 20 '12 at 10:51

score 0 · Answer 3 · answered Oct 29 '18 at 21:27

If You use fancybox ver. 3, You can use this piece of code

    $('.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;
            }

        },
    });

fancybox 2 gallery with nextClick - clicking final image closes it

3 Answers3