Hi I wonder if you can give me a hand with this please.
I have an html page:
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"><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>
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.show_image").fadeOut(1000, function(){
($this).removeClass("show_image").addClass("hide_image");
});
});
});
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.
I was thinking to first remove the class of hidden and replace it with the visible one, as per css. Sorry not quite sure how to proceed: http://antobbo.webspace.virginmedia....mages/test.htm
So any suggestion please?
thanks
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/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>
<script type="text/javascript">
// http://www.webdeveloper.com/forum/showthread.php?t=262590
// http://www.w3schools.com/jquery/jquery_ref_selectors.asp
$(document).ready(function(){
$('.thumb_images li a').click(function(){
//alert($(this).parent('li').index());
var n = $(this).parent('li').index();
$('.big_image img.show_image').removeClass('show_image').addClass('hide_image');
$($('.big_image img')[n+1]).addClass('show_image');
$('#pano p.show_paragraph').removeClass('show_paragraph').addClass('hide_paragraph');
$($('#pano p')[n+1]).addClass('show_paragraph');
});
});
</script>
</head>
<body>
<div id="pano">
<p class="show_paragraph">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="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/placeholder.jpg" alt="" class="show_image">
<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1.jpg" alt="" class="hide_image">
<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2.jpg" alt="" class="hide_image">
<img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3.jpg" alt="" class="hide_image">
</div>
<div class="thumb_box">
<ul class="thumb_images">
<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test1_thumb.jpg" alt="">Thumb1</a></li>
<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test2_thumb.jpg" alt="">Thumb2</a></li>
<li><a href="#"><img src="http://antobbo.webspace.virginmedia.com/various_tests/worktest/change_images/test3_thumb.jpg" alt="">Thumb3</a></li>
</ul>
</div>
</body>
</html>
Last edited by Ayşe; 07-14-2012 at 12:43 PM.
The Time Through Ages
In the Name of Allah, Most Gracious, Most Merciful
1. By the Time,
2. Verily Man is in loss,
3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.
hi thanks for posting your code, really kind of you.
A couple of questions please:
when you say
Code:
var n = $(this).parent('li').index();
it is returning the index of thumb_images li a's parent which is the <li> tag of the element we clicked on, correct? SO what's the value of that?
then $('.big_image img.show_image').removeClass('show_image').addClass('hide_image');
here we are selecting the image with a class of show_image inside the big_image container, removing the class of show_image and assigning it the class of hide_image
$($('.big_image img')[n+1]).addClass('show_image'); what does that n+1 do? I mean we are selecting an image within the big_image container, so that n+1 is somehow identifying a specific image?
This $('#pano p.show_paragraph').removeClass('show_paragraph').addClass('hide_paragraph'); is clear
and finally this $($('#pano p')[n+1]).addClass('show_paragraph');
again what doe n+1 do here?
thanks a lot
The parent of <a> element is <li> element.
<li> element is in <ul> element.
The index of first <li> element is 0.
The index of second <li> element is 1.
The index of third <li> element is 2.
alert( $(this).parent().index() ) give me the index of <li> element that contained <a> element we clicked on
Last edited by Ayşe; 07-17-2012 at 02:35 PM.
The Time Through Ages
In the Name of Allah, Most Gracious, Most Merciful
1. By the Time,
2. Verily Man is in loss,
3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.
Reply With Quote
Bookmarks