什么是最好的jQuery“点击缩略图并更改主图像”模块？

这就是我所拥有的（所有动态生成，如果这有所不同）：

图像列表
每张图片的标题
每个图像的缩略图

该页面应加载一个完整大小的图像和所有缩略图。当用户单击缩略图时，全尺寸图像会显示带有标题的新图像。如果他们单击另一个缩略图，图片（和标题）将再次更改。

这不是很复杂。几个月前我在一起解决了一个解决方案，但是我需要再次这样做，我正在看这个糟糕的代码，并认为必须有一个更好的方法（并且知道jQuery，其他人已经完成了它，并完成了好吧）。

思考？链接？

谢谢！

这是一个看起来很漂亮，用jQuery编写的： Photo Slider

这是另一个我更喜欢的地方： Galleria

这里的大多数答案就像用正典拍摄苍蝇一样!!

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

这就是你所需要的…… 4行代码。

看这里：画廊在4行

你试过Lightbox吗？ http://leandrovieira.com/projects/jquery/lightbox/

根据他在这里链接的krembo99的答案，我想分享我的解决方案，因为当我的客户请求了这样的function时，我已经上传了数百张照片。考虑到这一点，通过在提供的代码中添加一些额外的行，我能够获得适合我的参数的解决方案。

我也在使用较小的图像，所以我没有必要创建相同文件的小型和大型版本。

 $('.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看起来的样子。