jQuery的照片庫

我已經實現了其在網頁中呈現一系列圖像的縮略圖（200x200像素）的一本相冊，但我也希望允許用戶通過點擊縮略圖顯示全尺寸的意見的圖片。通過隱藏縮略圖索引，全尺寸視圖應顯示在同一頁面中。因此，一旦用戶關閉全尺寸圖像，縮略圖索引將再次顯示。我有以下的代碼是從JSON文件中讀取所有的圖片，並將它們添加到div＃圖像並應用CSS將其與IMG {高度：200像素，寬度：200像素}。jQuery的照片庫

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新手，想做上面的任務，所以任何回答如何做到這一點將不勝感激。先謝謝你。

來源

2012-10-16 kokosg

你有沒有看看此http：//tympanus.net/ Development/MultiMediaGallery/ – Tariqulazam

您是否想要使用自定義代碼實現此操作，還是希望已經有這樣的庫？ – PinnyM

@Tariqulazam很好的實現，但你可以更具體哪些功能在照片庫中獲取想法？ – kokosg

看看我在這裏做什麼，逆向工程，以滿足您的需求：http://oregonadventuretours.com/

注意如何我剛剛的顯示和隱藏一個div與它更多的內容，在你的情況下，將是更大的照片。

來源

2012-10-16 20:52:18

請試試這個：

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');

來源

2012-10-16 21:05:55 VijayS91

jQuery的照片庫

回答

相關問題