Jump to content
Larry Ullman's Book Forums

Titles For Image Gallery


Recommended Posts

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 :rolleyes:

Link to comment
Share on other sites

I've used a jQuery thumbnail gallery before called lightBox, and when I used that, it automatically handled setting the title attribute for the pic title and everything.

Basically, you just set the title in the HTML, attach the jQuery library to the onclick event of the thumbnails, and it did everything for you.

 

You may want to check out jQuery lightBox, or any number of other jQuery libraries that probably do the same thing.

Sorry, but I really didn't take much time to look at your code, and if you're not getting any errors, then that means that your actual logic is not sound, and you probably need to break your code apart, one method call at a time, to trace exactly what's being sent to what, etc., etc.

Link to comment
Share on other sites

 Share

×
×
  • Create New...