带有javascript/jquery的缩略图照片选择器

Question

我想创建类似下面截图的东西。顶部的大图像将是主显示，当您单击底部的缩略图时，顶部的大图像将变为缩略图图像。

ps忽略“返回顶部”文本。

有没有一种简单的方法可以用javascipt/jquery做到这一点？

​

​

Answer 1

有几种方法可以做到这一点。最简单的方法是像这样使用一个图像：

<img src="myimg.jpg" class="thumb" title="Click Me" />

<div id="view"><img /></div>

使用一些JS/jQuery来做以下事情：

$(function(){
    $(document).on('click', '.thumb', swapImage); //wire up click event
});

function swapImage() { 
    var thumb = $(this);
    //steal src from thumb and pop it into main img
    $('#view').find('img').attr('src', thumb.attr('src'));
}

请确保在缩略图上放置一些CSS以缩小缩略图，但要让#view图像保持完整大小。当然，这不是最好的方法，但它可以为您指明正确的方向。

第二种方法是创建两个图像，一个用于缩略图，另一个用于主图像。如果您遵循严格的命名约定，则可以使用上面的代码，但在swapImage()函数中执行如下操作：

    //thumb and large image are named the same, 
    //except large has "large-" in front
    $('#view').find('img').attr('src', 'large-' + thumb.attr('src'));

祝好运!

Answer 2

如果你愿意尝试一下Javascript库，你可以看看这篇文章

http://www.infoq.com/articles/emberjs

这是一个样例应用程序，可以满足您的大多数需求(在您的问题中)。有一些示例工作代码，您应该能够进行自定义。