Need help: Simple jQuery click swap image gallery

JavaScript
1

This is what I’m trying to do:

I want a simple image container to swap the image inside it by clicking the nav buttons on the right like 1, 2, 3

Here’s my code:

HTML

<div id="item1">
			<div class="img-container shadow" style="background-image:url(images/gallery/tcg1.jpg)">
				<img src="images/gallery/tcg1.jpg" width="530" height="421">
				<img src="images/gallery/tcg2.jpg" width="530" height="421">
				<img src="images/gallery/tcg3.jpg" width="530" height="421">
			</div>
			
			<ul class="nav">
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>	

.img-container {
	display: block;
    float: left;
    height: 421px;
    margin: 0 20px 65px 0;
    width: 530px;
	}
.img-container img {display:none}
.img-container .show {display:block}

.nav {}

.nav li {
	background: none repeat scroll 0 0 #eee;
    color: #444444;
    display: block;
    float: left;
    font-family: Courier,Verdana,Geneva,sans-serif;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    text-align: center;
    text-decoration: none;
    width: 30px;
	border:1px dotted #999;
}

	.nav li.hover {background:#e23d25; color:white;}

jQuery

$('.nav li').css('cursor','pointer');
	
	$('.nav li').eq(0).click(function () {
		$('.img-container img').eq(0).toggleClass("show");
		$(this).toggleClass("hover");
	});
	$('.nav li').eq(1).click(function () {
		$('.img-container img').eq(1).toggleClass("show");
		$(this).toggleClass("hover");
	});
	$('.nav li').eq(2).click(function () {
		$('.img-container img').eq(2).toggleClass("show");
		$(this).toggleClass("hover");
	});

My jQuery code is not right. I want it to turn off the “hover” class and the “show” class of the others when you click one. I think I need some kind of if…else? Can someone point me in the right direction on how to write it?

I have a bg image set on the container div so there’s an initial image to view.

I also need multiple of these on the same page!

2

The standard technique is to turn off all of them, and then to turn on the one that you require.

You can use the context selector to achieve that.

For example, going up to the parent element where the id starts with item:


var container = $(this).parents('div[id^="item"]');
$('.img-container img', container).eq(0).toggleClass("show");