fancybox with mutiple title on right side of image

问题

I need to show image title, date and link on the right side of the image.

something similar to this example

by default fancybox allow us few option like inside, outside, top but not left or right side of image. and with navigation buttons < >

$(".fancybox").fancybox({
    helpers : {
        title: {
            type: 'inside',
            position: 'top'
        }
    },
    nextEffect: 'fade',
    prevEffect: 'fade'
});

Is there a ways we can do it like as shown in image below

Fiddle example http://jsfiddle.net/JYzqR/

回答1:

You can use fancybox tpl (template) option and add information on callback like afterLoad like so:

$(".fancybox").fancybox({
    helpers : {
        title: {
            type: 'inside',
            position: 'top'
        }
    },
    nextEffect: 'fade',
    prevEffect: 'fade',
    afterLoad: function() {
        var html = '<span>Date, File Type, Download</span>';
        $('.fancybox-sidebar').append(html);
    },
    tpl: {
        wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div><div class="fancybox-sidebar"></div></div></div></div>'
    }
});

DEMO

来源：https://stackoverflow.com/questions/26257444/fancybox-with-mutiple-title-on-right-side-of-image