changing images with jquery

Hi I wonder if you can give me a hand with this please.
I have an html page:

<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">
<img src="placeholder.jpg" alt="" class="show_image">
<img src="test1.jpg" alt="" class="hide_image">
<img src="test2.jpg" alt="" class="hide_image">
<img src="test3.jpg" alt="" class="hide_image">
</div>
<div class="thumb_box">
<ul class="thumb_images">
<li><a href="#"><img src="test1_thumb.jpg" alt="">Thumb1</a></li>
<li><a href="#"><img src="test2_thumb.jpg" alt="">Thumb2</a></li>
<li><a href="#"><img src="test3_thumb.jpg" alt="">Thumb3</a></li>
</ul>
</div>
</body>
</html>

CSS:

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

and part of the script I am trying to develop:

var pic1 = new Image();
pic1.src = "test1.jpg";

var pic2 = new Image();
pic2.src = "test2.jpg";

var.pic3 = new Image();
pic3.src = "test3.jpg";

$(document).ready(function(){

$("thumb_images li a").click(function(){

$("big_image img").fadeOut(1000, function(){



});

});

});

I am not entirely sure how to proceed though. I have preloaded the images and what I need to do is when I click on a thumbnail the image in the big div will change to reflect the thumb I clicked on. The same should happen to the paragraphs that are at the moment hidden. SO, to summarize: when I land on the page there is a default paragraph and a default image: when I click on the thumbnail both the big image and the paragraph will be removed and replaced by the big image and the paragraph that goes with it. So any suggestion as to how to proceed please?
thanks

changing images with jquery

dupalo

dupalo

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week