追記:picplzは2012年7月3日に閉鎖されましたので、この記事のデモはもはや動きません。写真にフィルタをかけてアップロードできる写真SNSのpicplzですが、2月にAPIが公開されていましたので、それを使ってギャラリーを作ってみました。API今回はpicplzのinterestingにある画像を一覧表示します。いやまあ直接見に行けばいいってのは分かってますけどねwデモとダウンロードは以下からどうぞ。8以降なら普通に見れると思います。APIデモファイルをダウンロードまずはHTMLから。必要な要素をそのまま記述しておきます。--></div>jQueryで追加してもいいんですけど、めんどくさくなってきたので直接書きました。次はCSSですが、特に変わったことはしていませんので、デモページのを見るなりダウンロードして確認するなりしてください。transparentはChrome対策です。jQueryを使って書いていきます。説明はコメントでやります。ここにコードを書いていきます。});お約束を書いたら、まずは各種変数を。$('<ul/>').prependTo($gallery);o.thumbSizeとかのsは正方形、rは最長サイズです。ロードできる回数というのは、このAPIで取れる画像は240枚までなので、呼び出し回数を先に決めておきます。次はデータを取得する部分。});}パラメータなどはAPIドキュメントを見てください。last_pic_idを指定してAPI叩くと、その画像の続きから取得できます。次はデータ取得が成功したときの処理です。});}サムネイル画像は、画像のロードが終わってから表示するようにしています。ここでは画像のデータをまとめておいて、それを引数として関数に渡しています。次は画像のロードが終わったときに使う関数を作ります。$imageList.children().fadeIn();}ここまで終わって、サムネイル一覧が表示されるようになりました。次はサムネイルをクリックしたときの処理です。Templatesを使って書き出すHTMLを作っています。使わなくてもできますが、めんどくさかったので......。pubdate;}拡大画像を閉じるための処理ですね。timeで書かれているので、それを人間にも読めるように書き換えています。追記:日付の処理は置換を使っていましたが、変更しました。closeView(e);});$moreをクリックしたら、また画像を取ってくるようにしています。残りの2つは画像の詳細を閉じる動作です。ページを開いた直後に行う取得処理loadImages();ページを開いた直後と書いてますが、ドキュメントの読み込みが完了したときですね。