Hi there I am working on a small test, trying to change images with jquery. I have tried different combination but no joy.
SO, here's the code:
html:
Code:
<html>
	<head>
		<title>test</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<p>This paragraph is the default</p>
			<p class="hide_paragraph">This paragraph comes in with image 1</p>
			<p class="hide_paragraph">This paragraph comes in with image 2</p>
			<p class="hide_paragraph">This paragraph comes in with image 3</p>
		</div>
		<div class = "big_image" id="big_image">
			<img src="placeholder.jpg" alt="" id="placeholder_image" >
			<img src="test1.jpg" class="hide_image">
			<img src="test2.jpg" class="hide_image">
			<img src="test3.jpg" class="hide_image">
		</div>
		<div class="thumb_box">
			<ul class="thumb_images">
				<li><a href="#"><img src="test1_thumb.jpg" alt="" onclick="changeImage('test1.jpg')">Thumb1</a></li>
				<li><a href="#"><img src="test2_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb2</a></li>
				<li><a href="#"><img src="test3_thumb.jpg" alt="" onclick="changeImage('test2.jpg')">Thumb3</a></li>
			</ul>
		</div>
	</body>
</html>
CSS (probably with a few unnecessary rules)
Code:
.big_image{
	border:1px solid red;
	width:700px;
	height:525px;
	margin:0 auto;
}

.thumb_images{
	list-style:none;	
}

.thumb_images li{
	float:left;
	padding:15px;
}

.thumb_images li img{
	display:block;
}


body{
	background-color:pink;
}

.thumb_images li a img{
	border-style:none;
}

.thumb_images li a{
	text-decoration:none;
}

.thumb_images li a:hover{
	color:red;
	text-decoration:underline;
}

.hide_image{
	display:none;
}

.show_image{
	display:block;
}

.hide_paragraph{
	display:none;
}

.show_paragraph{
	display:block;S
}
script:
Code:
function changeImage(image){
	
	$("big_image img").attr("src",image).removeClass("hide_image").addClass("show_image");
	
	

}
Now, what was I trying to achieve? Well I would like to be able to click on a thimbnail and change the big image accordingly together with the paragraph related to it. YOu can see the site in here: http://antobbo.webspace.virginmedia..../test/test.htm
Needless to say it doesn't work now. What I have attempted to do in my script was to pass the image as a parameter to the functin and then the jquery is supposed to change the src of the image with the new image path, remove the hidden class and add a show_image class.
Any suggestion is very welcome of course thanks