I've been looking for a really easy/lightweight way to just be able to click thumbnails to switch the src of a larger image.
- This is what I've found: /
I haven't actually tried it out yet. Is this the best solution?
The larger images to be swapped in will have the same width but a different height. Will this cause problems/is there something I need to add for this functionality? Would it be better to do a div with a background-image that swaps and is the height of the largest image?
Also, someone said that it only works once (??)... I'd need it to start out on a certain image, then be able to change to 2-4 other images on thumbnail click.
Thanks for any advice! I'm certainly (obviously) no Javascript writer.
I've been looking for a really easy/lightweight way to just be able to click thumbnails to switch the src of a larger image.
- This is what I've found: http://snipplr./view/8688/jquery-image-swap/
I haven't actually tried it out yet. Is this the best solution?
The larger images to be swapped in will have the same width but a different height. Will this cause problems/is there something I need to add for this functionality? Would it be better to do a div with a background-image that swaps and is the height of the largest image?
Also, someone said that it only works once (??)... I'd need it to start out on a certain image, then be able to change to 2-4 other images on thumbnail click.
Thanks for any advice! I'm certainly (obviously) no Javascript writer.
Share Improve this question asked Oct 28, 2009 at 23:12 McFly88McFly88 511 gold badge1 silver badge8 bronze badges3 Answers
Reset to default 7You should be able to switch images as many times as you wish.
The piece of code you reference replaces the image source of #target, with the href of a link within a #thumbs div. It should work fine.
<img id="target" src="images/main.jpg">
<div id="thumbs">
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a>
</div>
Now as far as width and height, I am pretty sure there are some cross-browser patibility issues with how browsers handle a defined width, but an undefined height, when you swap out the images.
In firefox, the following works. Plain old javascript, no jquery:
<html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<img id="main" src="images/main.jpg" width="50">
<a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>
</body>
</html>
This example eliminates loading time after clicking on thumbnails:
HTML:
<div id="big-image">
<img src="http://lorempixel./400/200/sports/1/">
<img src="http://lorempixel./400/200/fashion/1/">
<img src="http://lorempixel./400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel./100/50/sports/1/">
<img src="http://lorempixel./100/50/fashion/1/">
<img src="http://lorempixel./100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle/Qhdaz/2/
there is also another solution too :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>hello world</h1>
<img id="image" src="" alt="" />
<script>
const thumbnailUrl = "./thumbnail.jpeg";
const wideImageUrl = "./wide-image.jpeg";
const image = document.getElementById("image");
image.src = thumbnailUrl;
let isThumbnail = true;
image.addEventListener("click", () => {
image.src = isThumbnail ? wideImageUrl : thumbnailUrl;
isThumbnail = !isThumbnail;
});
</script>
</body>
</html>