how to add text below image on fancybox plugin?

Question

I'm using the fancybox plugin - http://fancyapps.com/fancybox/

I can't find where to add the class "data-fancybox-title" that suppose to show the text that is in the title under image when the lightbox open.

I read the documentation but I still didn't figure it out.

Answer 1

You HTML would look something like this..

You need to specify the title attribute for the anchor tag

<a rel="gallery" title="Lorem ipsum Title" class="fancybox"   
                  href="http://fancyapps.com/fancybox/demo/1_b.jpg">
     <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>

And to display at the bottom of the image try this

$(".fancybox").fancybox({
    helpers : {
        title: {
            type: 'inside',
            position: 'bottom'
        }
    }
});

Check Fiddle