PDA

View Full Version : Captions on auto generated thumbnail images



asalute
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());
$this.css({
'float': 'right',
'width': o.thumbwidth,
'height': o.thumbwidth,
'overflow': 'hidden',
'color': 'red'
});
} else {
$img.width(o.thumbwidth);
$img.height(($imgheight / $imgwidth) * o.thumbwidth);
$this.css({
'float': 'right',
'cursor': 'pointer',
'color' : 'red',
'margin-top' : '200'
});
$this.height($img.height());
}
$this.click(function() {
var x = $outer.find('.thumbs li')
.index($this);
if (showing != x) {
$orig.find('li')
.fadeOut();
$orig.find('li')
.eq(x)
.fadeIn();
showing = x;
}
});
});
var $thumb = $outer.find('.thumbs li');
$thumb.eq(0)
.addClass('on');
$thumb.not('.on')
.fadeTo(0, o.opacity);
$thumb.click(function() {
var t = $(this);
var i = $thumb.index(this);
if (current != i) {
$thumb.removeClass('on');
t.addClass('on');
$thumb.not('.on')
.fadeTo(200, o.opacity);
current = i;

}
})

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


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