javascript - 如何在FeatherLight Image Gallery中添加描述文字？

Question

试图找出如何将文本描述添加到 featherlight.js 灯箱图片库。有没有人知道或有任何经验？

这是 html 布局的示例:

<div class="mix digital" data-myorder="12" style="display: inline-block;">
        <a class="gallery2" href="gallery_images/design/woodcut.jpg">
        <div class="thumbnail" style="background-image:url(gallery_images/design/woodcut_th.jpg);"></div></a>
    </div>

<div class="mix digital" data-myorder="11" style="display: inline-block;">
        <a class="gallery2" href="gallery_images/design/script.jpg">
        <div class="thumbnail" style="background-image:url(gallery_images/design/script_th.jpg);"></div></a>
    </div>

...还有更多图片

我只是希望能够在灯箱打开时添加一些文本作为对图像的描述，但我在文档中找不到它。

如果没有，有人知道可以实现此目的的优质/轻型灯箱吗？

Answer 1

featherlight 的目标是轻便，没有内置选项，但使用 afterContent 回调很容易做到。

例如，假设您的文本位于 a 标记的 'alt' 属性中，您可以指定:

afterContent: function() {
    // Add a div for the legend if needed:
    this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content);
    // Set the content:
    this.$legend.text(this.$currentTarget.attr('alt'));
}

这是一个 working example .