如何将一个div添加到poptrox

Question

我想知道是否有一种方法可以将文本添加到 poptrox 弹出窗口。 我知道我可以使用标题属性来添加标题文本，但这不是我想要的。 我想在弹出窗口中添加一个 div 或文本元素，这样当用户单击图像时，会弹出一个描述图像的窗口。 有什么理由要这样做吗？

我正在关注 poptrox github 表格，我尝试使用 Iframes 和它允许的其他来源，但注意到正在按照我想要的方式工作

Answer 1

在画廊项目的 HTML 标记中，在链接到全尺寸图像的锚元素内添加一个带有 class “标题”的 div。

<a href="image1.jpg">
    <img src="thumb1.jpg">
    <div class="caption">Caption for Image 1</div>
</a>

在初始化 Poptrox 插件的 jQuery 代码中，将标题 class 添加到创建灯箱时应克隆的类列表中。

$('.gallery').poptrox({
    caption: function($a) { return $a.next('.caption').text(); },
    overlayColor: '#2c2c2c',
    overlayOpacity: 0.85,
    popupCloserText: '',
    popupLoaderText: '',
    selector: '.thumb > a',
    usePopupCaption: true,
    usePopupDefaultStyling: false,
    usePopupNav: true
});

然后，您可以添加 CSS 以根据需要设置标题样式。

.caption {
    background-color: rgba(0,0,0,0.7);
    bottom: 0;
    color: #fff;
    padding: 10px;
    position: absolute;
    width: 100%;
}