I've been trying to get this for a while (includes jQuery) and somehow nothing seems to work. The image gallery works fine but won't display title.
$(document).ready(function()
{
var pics=[];
for (var x=0; x<preLoadPics.lenght;x++)
{
pics[x]=new Image();
pics[x].src=preLoadPics[x];
}
var newPix=new Image();
newPix.src=preLoadPics[0];
$('#thumbPix a').click(function(evt){
evt.preventDefault();
var pixFile=$(this).attr('src');
var pixLink=$(this).attr('href');
var pixTitle=$(this).attr('title');
var oldPix=$('#pix img');
var newPix=$('<img src="'+pixLink+'">');
if(pixLink==oldPix.attr('src')){
return;
}else{
$('.selected').removeClass('selected');
//add highlight to this thumbnail
$(this).addClass('selected');
//make new image invisible
newPix.show();
//add to the #pix div
$('#pix').prepend(newPix);
newPix.show();
//fade out old image and remove from DOM
oldPix.fadeOut(0,function(){
$(this).remove();
});
//fade in new image
newPix.fadeIn(0);
oldPix.remove(pixFile,'^Lg+\w\.');
}
}); //end click
$('#thumbPix a:eq(0)').click();
}); //end ready
</script>
this is body section
<div id="thumbPix">
<li><a href="LgPicture.jpg" id="pix"title="Picture">
<img src= "smallPicture.jpg" border="2" bordercolor="#cccc99"/>Picture<br /></a></li>
One option that doesn't break it completely is adding pixTitle to the .prepend in the Javascript code. I got it to display title, but then it just builds the titles instead of replacing it.
$('#pix').prepend(newPix,pixTitle);
newPix.show();
any ideas? Thanks