Добавление div ниже изображений в colorbox

Используйте PHP и jQuery, в настоящее время отображая слайд-шоу изображений с Colorbox.

Я хотел бы включить DIV под каждым изображением (которое обновляется, когда каждое изображение отображается с новым контентом). Может использоваться для отображения связанного содержимого, функции комментариев и т. Д.

Исследовали вокруг, но все же, чтобы найти ответы – кто-нибудь сделал это раньше или имел какие-то подсказки?

Я думаю, мне нужно знать:

  1. Как (если?) Дополнительный дополнительный DIV может быть добавлен к выходу Colorbox
  2. Как я могу реагировать на изменение изображения (обновлять содержимое DIV)

Благодаря!

Вы можете использовать завершенную функцию обратного вызова, чтобы добавить информацию. Я сделал демоверсию , но в итоге я полностью позиционировал подпись, чтобы наложить изображение … если вы добавите его ниже, вам нужно растянуть всю коробку ( демонстрацию ).

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