Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 888
user1918417 Avatar asked Dec 20 '12 10:12

user1918417


1 Answers

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

like image 66
JFK Avatar answered Oct 24 '22 22:10

JFK