什么是最好的 jQuery“单击缩略图并更改主图像”模块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/612575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the best jQuery "click a thumbnail and change the main image" module?
提问by Eileen
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).
这不是很复杂。几个月前我一起破解了一个解决方案，但我需要再做一次，我正在查看这个蹩脚的代码并认为必须有更好的方法（并且知道 jQuery，其他人已经这样做了，并且完成了好吧）。
Thoughts? Links?
想法？链接？
Thanks!
谢谢！
采纳答案by OverloadUT
Here's one that looks pretty nice and is written in jQuery: Photo Slider
这是一个看起来很不错并且是用 jQuery 编写的：Photo Slider
And here is another which I like a bit better: Galleria
这是我更喜欢的另一个： Galleria
回答by krembo99
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 .
这就是你所需要的...... 4 行代码。
look here : gallery-in-4-lines
看这里：4行画廊
回答by Donnie Thomas
Have you tried Lightbox? http://leandrovieira.com/projects/jquery/lightbox/
回答by M. Cotter
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.
基于krembo99 的回答，他在这里链接，我想分享我的解决方案，因为当我的客户要求这样的功能时，我已经上传了数百张照片。考虑到这一点，通过向提供的代码添加几行额外的行，我能够获得适合我的参数的解决方案。
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.
这是我的 HTML 的外观。
<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>
回答by Kenco Gold
Check out my galleria implementation: Garden design Landscaper in Essex Gallery
查看我的画廊实施：埃塞克斯画廊的花园设计景观师
回答by Xunil
http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/
http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/
A page with 9 different photo slideshows in jQuery ready to use
一个带有 9 个不同照片幻灯片的 jQuery 页面可供使用
回答by bas
Try Galleriffic, it has everything you need.
试试Galleriffic，它有你需要的一切。
回答by SHymans
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.
许多这些脚本已经过时，对我不起作用，而且需要一组不同的缩略图图像。我认真地四处寻找，发现了一些非常简单的东西，它是普通的 js，不需要 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>
