nanoGALLERY網路相簿
找了幾款輕量級網路相簿想當作分享或展示用相簿，我的要求是用靜態網頁加第三方網路相簿服務來達成，不要太麻煩的步驟和太複雜的環境。看了Demo效果，最終選擇nanoGALLERY。此相簿使用jQuery搭配Picasa Web Albums Data API和Flickr API，可以輸出顯示到一般靜態網頁，本想利用輸出到Hexo的獨立頁面，但怎麼測試就是不成功，被Hexo渲染過後一定無法顯示結果（layout關閉也一樣），只好折衷將程式放到/hexo/themes/light/source/photos，再到主題設定檔設一個內部相簿連結，之後Hexo重新編譯都不會受影響（photos資料夾編譯後會被放到根目錄）。
下載的程式看似多又複雜，篩選你要的展示效果，其他用不到檔案可以刪除，真正留下檔案並不多。我只留下CSS資料夾所有檔案、jquery.nanogallery.js（我丟到CSS資料夾內）、和一個index.html（將demonstration.html裡面程式碼選其中一個效果改的）。nanoGALLERY實際使用後，有幾項優點：
- 主機需求低，不用大空間、動態網頁和資料庫。
- 標題字數過長不會被截斷。
- 適合各種裝置檢視瀏覽相片。
- 可以全螢幕檢視大圖。
- 有完整的工具列顯示（幻燈片播放，開啟原圖網址、全螢幕檢視）。
- 讀取相片速度快。
- 很容易整合到其他平台，例如這裡的其中一篇文章，就是使用此程式（好像是用Hugo整合的？）。
- 控制參數多，相片來源不一定要用Picasa或Flickr。
- 目前作者持續更新。
有幾項是開發人員才有影響，一般使用者無感。之前使用Picasa Web Albums Data API製作Blog相簿，是作者示範性玩票性質，很多功能都不夠好（也不會更新），特地搜尋到nanoGALLERY來取代原本使用的網路相簿。
我改的index.html，只擷取其中一小段功能來使用，內容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相簿</title>
<style>
* {font-family: sans-serif; color:#fff;}
a, h1, h2, h3, h4, h5 {text-align:center; color:#eee;}
body {background:#333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<link href="css/themes/clean/nanogallery_clean.css" rel="stylesheet" type="text/css">
<link href="css/themes/light/nanogallery_light.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="css/jquery.nanogallery.js"></script>
<script>
$(document).ready(function () {
jQuery("#nanoGallery4").nanoGallery({
userID:'你的user ID',kind:'picasa',thumbnailWidth:'auto',thumbnailHeight:160,
viewerDisplayLogo:false,
locationHash:false,
thumbnailHoverEffect:[{'name':'labelSlideUp','duration':300}],
thumbnailLabel:{display:true,position:'overImageOnBottom',descriptionMaxLength:50},
thumbnailLazyLoad:true,
theme:'clean',
colorScheme:'light',
locationHash: false,
level1: { thumbnailWidth: 200, thumbnailHeight: 120 }
});
});
</script>
</head>
<body>
<h2>相簿</h2>
<div style="margin:auto;max-width:600px;">
<div id="nanoGallery4"></div>
</div>
<br><br><h5>Powered by <a href="http://nanogallery.brisbois.fr/">nanoGALLERY</a></h5>
</body>
</html>改完直接開啟html就能看結果。
Update
以下為nanogallery2的使用心得。
目前nanogallery2實務上還有一些小問題：
- 檢視相片資訊顯示空白。
- 分享相片連結到社群網站顯示空白。
- 開啟相片來源網址除了Chrome瀏覽器，其他瀏覽器都會同時開啟兩個連結。
- 如果相片來源是Google相簿，相簿開啟速度會非常緩慢。
- 如果相片來源是Google相簿，必須安裝nanogp（須要PHP）來讀取Google相簿內容。
基於第四點和第五點是讓我較無法忍受的問題，使用幾天後決定把照片另外上傳到Flickr試驗看看，相簿開啟速度果然飛快很多，也不用再安裝nanogp。我覺得nanogallery2最明顯的優點是每本相簿和每張相片都有獨立的網址能分享給其他人欣賞。嫌麻煩的話，他們現在有提供nanogallery2 portable服務，建立相簿簡短程式碼嵌入到自己網站，完全不用安裝。