fancyapps 灯箱自定义标题格式/模板，利用来自锚标签的数据属性

Question

我不知道从哪里开始。任何帮助将不胜感激。

我做了一个小提琴，所以你可以看到我需要什么。 http://jsfiddle.net/RJajg/2/

我正在使用fancyapps lightbox。

我目前正在使用type: 'outside' 设置。这意味着，当灯箱打开时，脚本会获取标题属性并将其放置在 div 内的图像下方。

div 有类.fancybox-title

我想要实现的是使用图像链接中的数据属性将更多文本添加到此 div 中。

所以不仅仅是标题...

图片 1

我希望它是这样的......

图片 1 |下载高分辨率 |下载低分辨率

下载高/低分辨率字实际上是锚标签，使用来自链接的数据属性。 Please see the fiddle for my mark up.

抱歉，我没有在我的代码上投入太多精力，但我不知道从哪里开始或如何最有效地执行此操作。任何建议都会非常感谢。

这是我当前的代码。

$('#gallery1 a').attr('rel','fancybox-thumb').fancybox({
    padding: '0',
    prevEffect: 'none',
    nextEffect: 'none',
    closeBtn: false,
    helpers: {
        overlay: {
            opacity: 0.9,
            css: {
                'background-color': '#000'
            }
        },
        buttons: {
            position: 'top'
        },
        thumbs: {
            width: 50,
            height: 50
        },
        title: {
            type: 'outside'
        }
    },
    closeClick: false
});

Answer 1

你可以使用beforeShow 回调来设置title 你想要的方式：

beforeShow: function () {
    var highRes = "<a href='" + $(this.element).data("download-high") + "'>Download High-Res</a>";
    var lowRes  = "<a href='" + $(this.element).data("download-low")  + "'>Download Low-Res</a>";
    this.title  = this.title ? this.title + " | " + highRes + " | " + lowRes : highRes + "|" + lowRes;
}

查看您的forked JSFIDDLE