1

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

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

我正在使用fancyapps 灯箱。

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

div 有类.fancybox-title


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

所以不仅仅是标题...

图 1

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

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


下载高/低分辨率字实际上是锚标记，使用链接中的数据属性。请看我标记的小提琴。

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


这是我当前的代码。

$('#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
});
4

1 回答 1

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;
}

查看您的分叉 JSFIDDLE

于 2013-04-08T02:32:30.520 回答