这是我有什么（所有动态生成的，如果有差别）：什么是最好的jQuery“单击缩略图并更改主图像”模块？
缩略图上字幕该页面应该加载一张全尺寸图片和所有缩略图。当用户点击缩略图时，全尺寸图像会显示带有其标题的新图像。如果他们点击另一个缩略图，则图片（和标题）会再次发生变化。
这不是很复杂。几个月前，我一起攻击了一个解决方案，但我需要再次执行该操作，并且正在查看这些糟糕的代码，并认为必须有更好的方法（并且了解jQuery，其他人已经完成了它并完成了好吧）。
想法？链接？
谢谢！
这里有一个看起来相当不错，并写在jQuery的：Photo Slider
这里有另外一个我喜欢一个好一点： Galleria
Oooh，Galleria非常漂亮，正是我一直在寻找的东西！谢谢！ – Eileen 2009-03-04 22:00:43
http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/
9张不同的照片幻灯片一页在jQuery准备使用
尝试Galleriffic，它有你需要的一切。
这里的大部分答案都像是用一个canon拍摄苍蝇！
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});
这就是你需要的全部...... 4行代码。
和你在一起。一切似乎过度杀伤 – 2012-06-14 02:15:13
大厦关闭的krembo99's answer he linked here，我想分享我的解决办法，因为我已经上传数百张照片时，我的客户已经要求这样的功能。考虑到这一点，通过在提供的代码中添加一些额外的行，我能够得到一个适合我的参数的解决方案。
我也在使用较小的图片，所以我不需要通过创建同一个文件的较小版本的&。
$('.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'));
});
下面是我的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>
我们做类似的细微变化。 MouseOver Thumnail改变主图像，但不粘，点击拇指使主图像变粘。用户可以将鼠标移到拇指上查看，然后点击他们想要的;如果鼠标移过更多的拇指，主图像将在所有拇指的鼠标移出时恢复。 – Kristen 2009-03-04 22:56:04