在颜色框中的图像下方添加 div

Question

使用 PHP 和 jQuery，目前使用 Colorbox 显示图像幻灯片。

我想在每张图片下方包含一个 DIV（当每张图片显示新内容时会更新该 DIV）。可用于显示相关内容、cmets函数等。

四处研究，但尚未找到任何答案 - 有人以前做过这个或有任何线索吗？

我想我需要知道：

1. 如何（如果？）将额外的 DIV 添加到 Colorbox 的输出中
2. 如何对图像更改做出反应（以更新 DIV 内容）

谢谢！

Answer 1

您可以使用完成的回调函数来添加信息。我做了一个demo，但我最终将标题放置在与图像重叠的位置……如果你在下面添加它，你需要拉伸整个框（demo）。

CSS

#cboxLoadedContent {
    position: relative;
}
#extra-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    color: #fff;
    opacity: 0.8;
    filter: alpha(opacity=80);
    padding: 10px;
}

脚本

$("a[rel]").colorbox();

$(document).bind('cbox_complete', function(){
    // grab the text from the link, or whatever source
    var extra = $.colorbox.element().text();
    $('#cboxLoadedContent').append('<div id="extra-info">' + extra + '</div>');
});