Response title
This is preview!
Move this topic
Click thumbnail to show large image and hide all thumbs
in Getting Started
•
12 years ago
FIrst post here.
I have a webpage with a left navigation bar and a content box with thumbnails in. I would like to be able to click one image and have all the thumbnails hide and show the larger version of the image in their place. Is this possible?
Thanks
Nathan
I have a webpage with a left navigation bar and a content box with thumbnails in. I would like to be able to click one image and have all the thumbnails hide and show the larger version of the image in their place. Is this possible?
Thanks
Nathan
Attachments
1
Replies(4)
Yes, it's possible. You could hide the entire thumbnail group and show a single image in their place.
- $(function() {
- $('#thumbnails img').click(function() {
- $('#thumbnails').hide();
- var src = $(this).attr('src').replace('.png', 'Large.png');
- $('#largeImage').attr('src', src).show();
- });
- $('#largeImage').hide().click(function() {
- $(this).hide();
- $('#thumbnails').show();
- });
- });
- <div id="thumbnails">
- <img src="thumbnail1.png">...
- </div>
- <img id="largeImage" src="">
Hey, thanks for replying.
I cant seem to make this work, could you post a link to a working example?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
$('#thumbnails').click(function() {
$('#thumbnails img').hide();
var src = $(this).attr('src').replace('.jpg', 'Large.jpg');
$('#largeImage').attr('src', src).show();
});
$('#largeImage').hide().click(function() {
$(this).hide();
$('#thumbnails').show();
});
});
</script>
</head>
<body>
<div id="thumbnails">
<img src="images/thumbnail1.jpg" alt="" />
<img src="images/thumbnail2.jpg" alt="" />
<img src="images/thumbnail3.jpg" alt="" />
</div>
<img id="largeImage" src="" alt="" />
</body>
</html>
I cant seem to make this work, could you post a link to a working example?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
$('#thumbnails').click(function() {
$('#thumbnails img').hide();
var src = $(this).attr('src').replace('.jpg', 'Large.jpg');
$('#largeImage').attr('src', src).show();
});
$('#largeImage').hide().click(function() {
$(this).hide();
$('#thumbnails').show();
});
});
</script>
</head>
<body>
<div id="thumbnails">
<img src="images/thumbnail1.jpg" alt="" />
<img src="images/thumbnail2.jpg" alt="" />
<img src="images/thumbnail3.jpg" alt="" />
</div>
<img id="largeImage" src="" alt="" />
</body>
</html>
Leave a comment on kbwood.au's reply
You have transcribed the code incorrectly. The first click handler is for #thumbnails img and it then hides #thumbnails only.
Yes! thank you so much, this is great.
So ive got another question, you dont have to answer tho. This website is for my brother and he has no knowledge of web development what so ever.
So, could i make it that he adds folders to the "images" folder and the script adds the new folders name to the navigation and creates a new page with the thumbnail gallery on it. This might not be possible, or easier using another language. I dont expect you to code this just advice on what tool is best to use for my needs.
Many thanks again
Nathan
So ive got another question, you dont have to answer tho. This website is for my brother and he has no knowledge of web development what so ever.
So, could i make it that he adds folders to the "images" folder and the script adds the new folders name to the navigation and creates a new page with the thumbnail gallery on it. This might not be possible, or easier using another language. I dont expect you to code this just advice on what tool is best to use for my needs.
Many thanks again
Nathan
Leave a comment on kbwood.au's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to nathan.czachur's question