Basic jquery help!

JavaScript
1

Hi

I’m new to jquery and have been trying to do something which is probably really simple! My client would like a photo gallery and on the left hand side is a thumbnail with a description of a project and when this is clicked on the image turns from black and white to colour, the text becomes darker and the large image related to the thumbnail is show on the right hand side.

I’m stumbling at the first hurdle. I can get the text to turn darker and have found a piece of jquery which makes the thumbnail turn to colour BUT I’d like these changes to revert back to B&W thumbnail & lighter text when I click on another thumbnail. At the moment when I click elsewhere they stay as the changed state. Have tried a few things but I’m clearly missing the obvious.

Any help much appreciated!

This is my jquery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	
	$("ul.gallery li").click(function() { //On click...
		
		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
		
		//Set a background image(thumbOver) on the <a> tag 
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
		//Fade the image to 0 
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		}); 
	} , function() { //on hover out...
		//Fade the image to 1 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

});


//Change H2 colour
$(document).ready(function() {
	
	$("ul.gallery li h2").click(function() { //On click...
	$(this).css("color","#666");	
		
	});

});
</script>

This is my code:

<ul class="gallery">
<li><a href="#" class="thumb"><span><img src="" alt="" /></span></a>
<h2><strong>Title goes here</strong>Description goes here</h2>
<div class="large"><img src="" alt="" /></div>
</li>
</ul>

The CSS is:

#gallery {float: left;position:relative; width:800px; height:433px; padding-top: 160px;}
#gallery .con {height: 360px;width:400px;}

ul.gallery {width: 300px;list-style: none;margin: 0; padding: 0;}
ul.gallery li {float: left;	margin: 0px; padding: 0;display: inline;height: 92px;}
ul.gallery li a.thumb {width: 92px;height: 69px;cursor: pointer;display:block;float:left;}
ul.gallery li span { /*--Used to crop image--*/	width: 92px;height: 69px;overflow: hidden;	display: block;}
ul.gallery li a.thumb:hover {}
ul.gallery li h2 {font-size: 1em;font-weight: normal;margin: 0; padding: 0px;width: 260px;display:block;position:relative; left: 102px; top: -73px;color: #ccc;}
ul.gallery li h2:hover {cursor:pointer;}
ul.gallery li a {text-decoration: none; display: block;}

ul.gallery li div.large {display:none; border:0; width:400px; background:#fff; text-align:center;height:593px;}
ul.gallery li:hover div.large {display:block; position:absolute; left:400px; top:0px; z-index:10; height:593px;}
ul.gallery li:active div.large {display:block; position:absolute; left:400px; top:0px; z-index:5; height:593px;}
ul.gallery li:focus div.large {display:block; position:absolute; left:400px; top:0px; z-index:5; outline:0; height:593px;width: 400px;}
2

The first issue I see is that your function to change the thumbs back isn’t actually bound to anything. It looks like part of a .hover() set, but is being passed to .click()

I would personally approach this by binding the click function to the gallery, then use a handler to sort out what happened.

I don’t have the time to write the full code for this right now, but I will describe the process so that you can see the steps involved.


$('ul.gallery').click(function(evt){
 //Get the target of the event

 //If that target does not have the class 'activeThumb' find the element that does have .activeThumb, and fade it back to normal.

 //If the target was a thumb and does not have .activeThumb class, fade it to color and give it the class 'activeThumb'

})

I hope this helps. I wish I had more time to go into depth here. If you need any more help, I would be glad to assist you later.

Good luck!