jQuery 照片库答案

【问题标题】：jQuery photo galleryjQuery 照片库
【发布时间】：2012-10-16 20:47:19
【问题描述】：

我已经实现了一个相册，它在网页中显示了一系列图像缩略图（200 像素），但我还希望允许用户通过单击缩略图来显示图片的全尺寸视图。通过隐藏缩略图索引，应在同一页面中显示全尺寸视图。因此，一旦用户关闭全尺寸图像，缩略图索引就会再次显示。我有以下代码从 JSON 文件中读取所有图片并将它们附加到 div#images 并使用 img {height:200px, width:200px} 将 CSS 应用于它们。

var imageList;
$.getJSON('images.json', function(data) {
    imageList = data;
    for (var i = 0; i < imageList.length; i++) {
        $('<img>').attr({src: imageList[i].img_src, 
                    title: imageList[i].title}).appendTo('#images');    
    }
});

我是 jQuery 的新手，想要完成上面的任务，所以任何关于如何做的答案都将不胜感激。提前谢谢你。

【问题讨论】：

你看过这个了吗？tympanus.net/Development/MultiMediaGallery
您是想使用自定义代码来实现这一点，还是想要一个已经这样做的库？
@Tariqulazam 很好的实现，但是您能否更具体地说明一下照片库中的哪个功能可以得到一个想法？
@kokosg - 它是一个 jquery 插件，所有功能都包含在插件本身中。你只需要用图像初始化它。您可以查看源代码以了解其工作原理。如果您需要任何工作样本，请告诉我。

标签： javascript jquery html css

【解决方案1】：

请试试这个：

Replace <img> as img.

改变这个，

$('<img>').attr({src: imageList[i].img_src, 
                    title: imageList[i].title}).appendTo('#images');

使用这个，

$('img').attr({src: imageList[i].img_src, 
                title: imageList[i].title}).appendTo('#images');

【讨论】：

【解决方案2】：

看看我在这里做什么，并对其进行逆向工程以满足您的需求：http://oregonadventuretours.com/

注意我是如何显示和隐藏一个包含更多内容的 div，在你的情况下，它会是更大的照片。

【讨论】：