Fancybox: populate next/prev buttons with element titles

Question

Is there a method within Fancybox 2 to get the titles of the next and previous elements, and use those titles in the next and previous button templates so the title appears as the link?

Something like this:

tpl: {
  next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>{next.title}</span></a>',
  prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>{prev.title}</span></a>'
}

I'm using Fancybox for a "step by step" tutorial. Instead of the next/prev arrows, I would like people to see the titles of the next/prev section - the title would be the link.

I've read through the js code and I don't think it's there, but I'm sure there is a way to get it!

Answer 1

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, if loop API option is set to true (default))
• what is the next title for the last element of the gallery (should be the first, if loop API option is set to true)

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