在colorbox中的图像下方添加div

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

我想在每个图像下面包含一个DIV（当每个图像显示新内容时更新）。 可用于显示相关内容，评论function等。

研究过但尚未找到任何答案 – 任何人之前做过这个或有任何线索？

我想我需要知道：

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

谢谢！

Answer 1

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

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('
' + extra + '
'); });