fancybox: title for next and prev item

Question

I need to make a navigation 'prev' and 'next' but need a title of them next to it.

ex:

< prev | 'previous post title'                                     'next post title' | next >

I wasn't able to find any relevant post anywhere and was hoping some genius to help me out with this problem.

I've looked into the thumbnail helper which actually pulls next and previous photo, but I'm not that savvy enough to pull just the title from that code.(not even sure that direction is right)

HELP!

Answer 1

You could use fancybox tpl option to customize the navigation like

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        tpl: {
            next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span>next post title | next &gt;</span></a>',
            prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span>&lt; prev | previous post title</span></a>'
        }
    });
}); // ready

Then use custom CSS (after you load the fancybox CSS file) to format the next/prev items as needed like :

.fancybox-prev span, .fancybox-next span {
    background-image: none; /* remove default arrows */
    bottom: -30px;
    color: #000 !important;
    top: auto;
    width: 100%;
}

See JSFIDDLE