Hi Ive created a (really) simple thumbnail gallery using jQuery. Functionality is working fine but I am having trouble getting the the active thumb to highlight.
I want it so the thumb you click stays at 100% opacity and the rest fade to 50%. Ive been pulling my hair out trying to get it to work although I have a feeling is a simple solution. I tried matching the href of the clicked thumb to the current image but got weird results. Im still fairly new to JS and jQuery. Im hoping someone can help and point me in the right direction. Also any comments on my code and how I could improve it are welcome. Thanks in advance... At the moment my script loops through the anchor tags of my thumbs - retrieves the href attribute onclick(which is the path to the main image) , fades out main image div, replaces the image and then fades the div back in after a setTimeout Here is a link to the gallery example as it is now: http://loopdream.com/gallery/ and here is my js code: $(function() { var thumbLinks = $('#galleryThumbs a'); var thumbCount = thumbLinks.length; var thumbImages = $('#galleryThumbs img'); var image = $("#galleryImage"); image.hide().fadeIn("slow"); $("#galleryCounter").html("Image 1 of "+thumbCount+""); thumbLinks.each(function(i) { var current = (i+1); this.onclick = function () { var imageUrl = this.getAttribute('href'); image.fadeOut("slow", function() { image.html('<img src="'+imageUrl+'" />'); setTimeout("$('#galleryImage').fadeIn('slow')", 800); $("#galleryCounter").html("Image "+current+" of "+thumbCount+"") }) return false; } }) });