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;
                                }

                })




        });

Reply via email to