Question

我被困在哪里开始这个。任何帮助将不胜感激。

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

我正在使用fancyapps lightbox。

我目前正在使用type: 'outside'设置。这意味着，当打开灯箱时，脚本会获取title属性并将其放在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

使用锚标记中的数据属性的fancyapps灯箱自定义标题格式/模板

1 个答案: