View Full Version : Captions on auto generated thumbnail images

03-06-2014, 02:50 PM
I have an image gallery where thumbnails are auto generated, then you hover over a thumbnail and the main image changes to the current picture of the thumbnail that you are hovering. I want to display captions on the thumbnails, however!!!! I can't access the img tags directly because the thumbs are auto generated from the following code snippet

function set_thumbs() {

$outer.find('.thumbs li')
.each(function() {
var $this = $(this);
var $img = $this.find('img');
var $imgwidth = $img.width();
var $imgheight = $img.height();

if (o.thumbcrop) {
$img.width($imgwidth * o.croppercent);
$img.height(($imgheight / $imgwidth) * $img.width());
'float': 'right',
'width': o.thumbwidth,
'height': o.thumbwidth,
'overflow': 'hidden',
'color': 'red'
} else {
$img.height(($imgheight / $imgwidth) * o.thumbwidth);
'float': 'right',
'cursor': 'pointer',
'color' : 'red',
'margin-top' : '200'
$this.click(function() {
var x = $outer.find('.thumbs li')
if (showing != x) {
showing = x;
var $thumb = $outer.find('.thumbs li');
.fadeTo(0, o.opacity);
$thumb.click(function() {
var t = $(this);
var i = $thumb.index(this);
if (current != i) {
.fadeTo(200, o.opacity);
current = i;


.hover(function() {
$(this).fadeTo(200, 1);
}, function() {
$(this).fadeTo(200, o.opacity);

How can I add code to create a caption on the thumbnail images?