Adding div below images in colorbox

Question

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

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?

I think I need to know:

1. How (if?) an additional DIV can be added to the output of Colorbox
2. How I can react to the image changing (to update the DIV contents)

Thanks!

Answer 1

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;
}

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