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回调很容易。

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

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。

如何在FeatherLight图库中添加描述文字？

1 个答案: