使用 PHP 和 jQuery,目前使用 Colorbox 显示图像幻灯片。
我想在每个图像下方包含一个 DIV(当每个图像显示新内容时会更新)。可用于展示相关内容、评论功能等。
四处研究但尚未找到任何答案 - 有人以前这样做过或有任何线索吗?
我想我需要知道:
- 如何(如果?)将额外的 DIV 添加到 Colorbox 的输出中
- 我如何对图像更改做出反应(更新 DIV 内容)
Thanks!
您可以使用完成的回调函数来添加信息。我制造了一个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;
}
Script
$("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>');
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)