微風夕語

[JavaScript] PicasaWeb 隨機相簿

2011-11-29 18:56 墳墓 (Brian Hsu)

因為轉到 Pelican 了，自然很多以前在 WordPress 上用的東西都不能用了，畢竟生出來的都是靜態網頁咩。

其中一個我比較在乎的功能是 PicasaWeb 隨機照片的部份，上網找了一下，發現有一些工具，但並沒有找到非常滿意的，所以參考了其他人寫的東西，自己做了一個 JavaScript 的版本出來。

感謝 PicasaWeb 本身的 API 就有考慮到 JavaScript 的應用，所以只要寫一個簡單的 JavaScript callback 函數就可以了，完整的程式碼如下，成果可以參考網頁右上角的『我的相簿』的連結。

/****************************************************
 *  PicasaWeb 隨機相簿 JavaScript Widget
 *
 *  使用方式：
 *
 *    1. 引入此 JavaScript 檔案
 *    2. 在要顯示的地方使用，記得將 [USERNAME] 的部份改成自己的 PicasaWeb 帳號
 *        <script src="http://picasaweb.google.com/data/feed/base/user/[USERNAME]?kind=album&access=public&alt=json-in-script&callback=showRandomAlbums"></script>
 *
 ****************************************************/

/**
 *  取得相簿網址
 */
function getAlbumURL(album) {

    var albumURL = ""

    for (var i = 0; i < album.link.length; i++) {
        if (album.link[i].rel == 'alternate') {
            albumURL = album.link[i].href
            break
        }
    }

    return albumURL;
}

/**
 *  顯示相簿連結
 *
 *  每本相簿是一個 <ul> 標籤
 *
 */
function showAlbum(album) {

    var albumTitle = album.title.$t
    var albumThumbnail = album.media$group.media$thumbnail[0].url
    var albumURL = getAlbumURL(album)

    document.write('<li class="albumItem">')
    document.write('  <a class="albumLink" href="' + albumURL + '" title="' + albumTitle +'" >')
    document.write('  <img src="' + albumThumbnail + '"/></a>')
    document.write('</li>')
}

/**
 *  隨機顯示相簿
 */
function showRandomAlbums(picasaJSON) {

    var shuffledAlbum = shuffle(picasaJSON.feed.entry)

    document.write('<ul class="albumList">')

    for (var i = 0; i < shuffledAlbum.length; i++) {
        var album = shuffledAlbum[i];
        showAlbum(album)
    }

    document.write('</ul>')
}

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/array/shuffle [v1.0]
shuffle = function(o){ //v1.0
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};