Jump to content
Larry Ullman's Book Forums

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:

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...