jQuery(document).ready(function($) {

    $('[data-fancybox="exposition"]').fancybox({
        infobar: false,
        toolbar: true,
        smallBtn: false,
        buttons : [ "arrowLeft", "arrowRight", "close" ],
        arrows: false,
        transitionEffect: "fade",
        baseClass: 'fancybox-custom-layout',

        caption : function( instance, item ) {
            // index put inside, we can get the number: `item.opts.fancyboxIndex`
            // and thus what we what inside the caption!

            // TODO read json to input good captions info
            return '\
            <div id="info">\
                <span class="info"><a href="painting.html?number=26">&#8505;&#xFE0E;</span></a></span>\
                <span class="title">La Truite</span><span class="year">1960</span>\
                <span class="format">Huile sur toile (55x35)</span>\
                <span class="comment">Reproduction de Courbet</span>\
            </div>\
            ';
        }
    });
});