Welcome to WebmasterWorld Guest from 54.198.69.193

Forum Moderators: open

Message Too Old, No Replies

changing images with jquery

     
8:28 pm on Jul 13, 2012 (gmt 0)



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
10:20 pm on Jul 13, 2012 (gmt 0)



at the end of the day it doesn't matter if I use jquery or javascript, I mean I cooked up a little javascript that works although it changes only 1 image:
var pic1 = new Image();
pic1.src = "test1.jpg";

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

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

function changeImage(){
var theImage = document.getElementById("placeholder_image");
theImage.src = pic1.src;

}
 

Featured Threads

Hot Threads This Week

Hot Threads This Month