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
How can I add code to create a caption on the thumbnail images?Code: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); });



Reply With Quote
Bookmarks