Fancybox custom titles for multiple galleries

Question

1)I have a bunch of images split in two galleries in fancybox. I am using the code below to split my titles into separate lines. My HTML has a separate div with the titles, each in a div as well. It works, but it is adding titles to both galleries simultaneously, so image 1 gets the same name in both galleries.

How do I insert separate titles for my two galleries?

$(document).ready(function() {
    $(".fancybox").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            arrows :    true,
            helpers : { 
                    title   : { type : 'inside' },
                    buttons : {}
            }, // helpers
            afterLoad : function() {
                this.title = $("#fancyboxTitles div").eq(this.index).html();
            } // afterload
    }); // fancybox
}); // ready

2)Also when the image shows up with the multi-line title, and I click "next", and then go back, the title disappears. How can I fix that? Thanks!

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Your code is pretty much a copy of what I posted here, however at the time such post was written, the fancybox version was 2.0.1. Some changes have been done since then (mostly improvements and bug fixes) so we would need to do some changes to your custom script as well as to your html structure. Also you may need to update to the latest version of fancybox (2.0.6 as today)

Assuming that you have grouped your galleries by setting a different rel attribute like:

<a class="fancybox" rel="gallery1" href="images/01a.jpg">image 1 - gallery 1</a>
<a class="fancybox" rel="gallery1" href="images/02a.jpg">image 2 - gallery 1</a>

<a class="fancybox" rel="gallery2" href="images/01b.jpg">image 1 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/02b.jpg">image 2 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/03b.jpg">image 3 - gallery 2</a>

1). group the titles of each gallery in different divisions too like this:

<div id="gallery1">
 <div>title image 1 / gallery 1</div>
 <div>title image 2 / gallery 1</div>
</div>
<div id="gallery2">
 <div>title image 1 / gallery 2</div>
 <div>title image 2 / gallery 2</div>
 <div>title image 3 / gallery 2</div>
</div>

IMPORTANT: notice that I have assigned an ID to the parent container that is equal to the rel attribute of each gallery.

2). Now, for version 2.0.6, we can't use the afterLoad callback as we did it for v2.0.1 (this is what it makes the titles disappear).... we will use beforeShow instead.

So replace this part of the script:

afterLoad : function() {
 this.title = $("#fancyboxTitles div").eq(this.index).html();
} // afterload

by this:

beforeShow  : function() {
 var gallery = $(this.element).attr("rel");
 this.title = $("#"+gallery+" div").eq(this.index).html();
} // beforeShow

That should do the trick.

PS. I will add a note to the other post for v2.0.6

Fancybox custom titles for multiple galleries

1 Answers1

Linked