FancyBox2 - Title on top AND on the bottom?

Question

Found several similar questions, but not the answer to this specific one..

Is there a way to add a title to BOTH the top and bottom of a FancyBox2 modal/popup?

I know how to position the title to the top or bottom. But need to put a title on the top and a caption on the bottom.

Thanks to all in advance..

Answer 1

You can modify the default fancybox template to add some extra HTML in. Like so:

Your HTML:

<a href='http://www.bbc.co.uk/news' class="fancybox" data-caption="caption here" title="Title here">Click</a>

Javascript:

$(".fancybox").fancybox({
    type: 'iframe',
    beforeLoad: function() {
        var caption = this.element.attr('data-caption');
        this.tpl.wrap = '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><p>'+caption+'</p></div></div></div>'

    },

    helpers:  {
        title : {
            type : 'inside',
            position: 'top'
        }
    }
});

I've used an iFrame as an example, but this should work for any Fancybox type.

JS Fiddle here: http://jsfiddle.net/WillDonohoe/thy0om73/

Look under the tpl section of the fancybox docs for more information: http://fancyapps.com/fancybox/#docs