Yes, it's possible but first you need to take in consideration
- how many elements exist in the gallery
- what is the previous
title
for the first element of the gallery (should be the last, ifloop
API option is set totrue
(default)) - what is the next
title
for the last element of the gallery (should be the first, ifloop
API option is set totrue
)
Then set the script that validates the conditions above within a fancybox callback (afterShow
) and set the title
attribute of the fancybox's previous/next navigation buttons to the corresponding value
so try this:
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// loop: false, // gallery may not be cyclic
afterShow: function () {
// initialize some variables
var gallerySize = this.group.length,
next, prev;
if (this.index == gallerySize - 1) {
// this is the last element of the gallery so next is the first
next = $(".fancybox").eq(0).attr("title"),
prev = $(".fancybox").eq(this.index - 1).attr("title");
} else if (this.index == 0) {
// this is the first image of the gallery so prev is the last
next = $(".fancybox").eq(this.index + 1).attr("title"),
prev = $(".fancybox").eq(gallerySize - 1).attr("title");
} else {
// otherwise just add or substract to index
next = $(".fancybox").eq(this.index + 1).attr("title"),
prev = $(".fancybox").eq(this.index - 1).attr("title");
}
// set title attributes to fancybox next/prev selectors
$(".fancybox-next").attr("title", next);
$(".fancybox-prev").attr("title", prev);
}
});
}); // ready
See JSFIDDLE
Notice that in my demo, the second element has not a title
attribute, so fancybox will display either next
or previous
by default. Additionally, don't worry if loop
is set to false
, the navigation arrows won't show up for the first or last elements, so nothing further to do.
BTW, don't need to mess with the TPL
option.
EDIT :
One thing that's not ideal about my adaptation of this is that it adds the link texts afterShow. Because the link texts are positioned relatively, this causes a noticeable delay/adjustment in the display of the fancybox after it appears ...
Unfortunately, you can't set the text/title until the navigation arrows are shown. The same script within the beforeShow
callback would be ignored and "next" and "previous" titles will be shown.
However, you can use the $.extend()
method to modify the default value of the (template) tpl
option before the navigation arrows are rendered (using the beforeShow
callback) like :
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
// loop: false, // gallery may not be cyclic
// preset titles before show
beforeShow: function () {
// initialize some variables
var gallerySize = this.group.length,
next, prev;
if (this.index == gallerySize - 1) {
// this is the last element of the gallery so next is the first
next = $(".fancybox").eq(0).attr("title"),
prev = $(".fancybox").eq(this.index - 1).attr("title");
} else if (this.index == 0) {
// this is the first image of the gallery so prev is the last
next = $(".fancybox").eq(this.index + 1).attr("title"),
prev = $(".fancybox").eq(gallerySize - 1).attr("title");
} else {
// otherwise just add or substract to index
next = $(".fancybox").eq(this.index + 1).attr("title"),
prev = $(".fancybox").eq(this.index - 1).attr("title");
}
// set title attributes to fancybox next/prev selectors
//$(".fancybox-next").attr("title", next);
//$(".fancybox-prev").attr("title", prev);
//
// use extend to modify the template
$.extend(this, {
tpl: {
next: '<a title="' + next + '" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev: '<a title="' + prev + '" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
}
}); // extend
}
});
}); // ready
See updated JSFIDDLE