What's the best jQuery “click a thumbnail and change the main image” module?

StackOverflow https://stackoverflow.com/questions/612575

  •  03-07-2019
  •  | 
  •  

Question

Here's what I have (all generated dynamically, if that makes a difference) :

  • A list of images
  • A caption for each image
  • A thumbnail for each image

The page should load with one full-size image and all the thumbnails. When a user clicks a thumbnail, the full-size image shows that new image with its caption. If they click another thumbnail, the picture (and caption) change again.

It's not very complex. I hacked together a solution a few months ago, but I need to do it again and I'm looking at this crappy code and thinking that there has to be a better way (and knowing jQuery, someone else has already done it, and done it well).

Thoughts? Links?

Thanks!

Was it helpful?

Solution

Here's one that looks pretty nice and is written in jQuery: Photo Slider

And here is another which I like a bit better: Galleria

OTHER TIPS

Most of the answers here are like shooting a fly with a canon !!

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

this is all you need .. 4 lines of code .

look here : gallery-in-4-lines

Building off of krembo99's answer he linked here, I wanted to share my solution as I had already uploaded hundreds of photos when my client had requested a feature like this. With that in mind, by adding a few extra lines to the provided code, I was able to get a solution that fit my parameters.

I was also working with smaller images as well, so I had no need to go through creating small & large versions of the same file. 

$('.thumbnails img').click(function(){

 // Grab img.thumb class src attribute
 // NOTE: ALL img tags must have use this class, 
 // otherwise you can't click back to the first image.

 var thumbSrc = $('.thumb').attr('src');

 // Grab img#largeImage src attribute
 var largeSrc = $('#largeImage').attr('src');

  // Use variables to replace src instead of relying on file names.
  $('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
  $('#description').html($(this).attr('alt'));

});

Here's how my HTML looks.

    <img src="path/to/file1.jpg" id="largeImage" class="thumb">
    <div id="description">1st image Description</div>

    <div class="thumbnails">

     <img src="path/to/file1.jpg" class="thumb" alt="1st image description">
     <img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
     <img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
     <img src="path/to/file4.jpg" class="thumb" alt="4th image description">
     <img src="path/to/file5.jpg" class="thumb" alt="5th image description">

    </div>

http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

A page with 9 different photo slideshows in jQuery ready to use

Check out my galleria implementation: Garden design Landscaper in Essex Gallery

Try Galleriffic, it has everything you need.

A lot of these scripts are out of date and don't work for me plus require a set of different images for thumbnails. I had a serious hunt around and found something very light which is plain js, no need for jquery.

<html>
<head>
<style>
* {margin:0; padding:0; border:0; outline:0; box-sizing:border-box;}
.image, .thumb {width:100%; height:100%;}
#product-image-wrap {position:relative; float:left; width:250px; height:325px; margin:50px 0 50px 50px;}
#product-image {position:relative; float:left; width:250px; height:250px; border:1px solid #d0d0d0; padding:20px; cursor:pointer; display:inline-block; transition:0.9s;}
#product-image:hover {opacity:0.7;}
.product-image-thumbnail {position:relative; float:left; width:55px; height:55px; border:1px solid #d0d0d0; margin-top:20px; padding:10px; cursor:pointer; display:inline-block; transition:0.9s;}
.product-image-thumbnail:hover {opacity:0.7;}
.product-image-thumbnail-spacer {position:relative; float:left; width:10px; height:130px;}
</style>

</head>
<body>

<div id='product-image-wrap'>

<!-- Main -->
<div id='product-image'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='0' class='image' alt='image 0'></div>

<!-- Thumbs -->
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_01_large.jpg' id='1' class='thumb' onclick='preview(this)' alt='image 0'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_02_large.jpg' id='2' class='thumb' onclick='preview(this)' alt='image 2'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_03_large.jpg' id='3' class='thumb' onclick='preview(this)' alt='image 3'></div>
<div class='product-image-thumbnail-spacer'></div>
<div class='product-image-thumbnail'><img src='http://workshop.rs/demo/gallery-in-4-lines/images/image_04_large.jpg' id='4' class='thumb' onclick='preview(this)' alt='image 4'></div>

</div>

<!-- Javascript -->
<script>
var lastImg = 1;
document.getElementById(lastImg).className = "thumb selected";
function preview(img) {
document.getElementById(lastImg).className = "thumb";
img.className = "thumb selected";
document.getElementById(0).src = img.src;
lastImg = img.id;
}
</script>

</body>
</html>

https://jsfiddle.net/uo6js5v7/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top