在colorbox中的图像下方添加div

问题描述

使用PHP和jQuery，当前使用Colorbox显示图像幻灯片.

Use PHP and jQuery, currently displaying a slideshow of images with Colorbox.

我想在每个图像下方添加一个DIV(当每个图像显示新内容时更新该DIV).可用于显示相关内容，注释功能等.

I would like to include a DIV below each image (that is updated when each image is displayed with new content). Could be used to display related content, comments function, etc.

经过研究但尚未找到任何答案-有人以前这样做过或有任何线索吗?

Researched around but yet to find any answers - anyone done this before or have any clues?

我想我需要知道:

1. 如何(如果有的话)将额外的DIV添加到Colorbox的输出中
2. 我如何应对图像变化(以更新DIV内容)

谢谢！

推荐答案

您可以使用完整的回调函数来添加信息.我制作了演示，但是我最终将标题绝对定位为与图像重叠...如果您在下面添加它，您需要拉伸整个框(演示).

You could use the completed callback function to add the info. I made a demo, but I ended up absolutely positioning the caption to overlap the image... if you add it below you'll need to stretch the entire box (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>');
});

这篇关于在colorbox中的图像下方添加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！