homepage Welcome to WebmasterWorld Guest from 54.166.8.138
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
changing images with jquery
dupalo




msg:4475500
 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

 

dupalo




msg:4475521
 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;

}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved