jqueryfancyboxfancybox-2

fancybox 2 gallery with nextClick - clicking final image closes it


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?


Solution

  • 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