javascript - 带有 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 Libraries，你可以看看这个

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

这是一个示例应用程序，可以满足您的大部分要求（在您的问题中）。您应该能够自定义示例工作代码。