Picasa Web Albums and jQuery fancyBox 2.0

Picasa

fancyBox 1.3 を fancyBox 2.0 に変更したのでメモ。ついでに Dropbox に置いていた CSS が数キロバイトのくせに読み出しが 300ms 以上かかるので Google Code に移行。1.3 と 2.0 だと仕様が変わっているようなのでスクリプトを書き直しました。

2.0 ではインターフェイス用の画像がひとつの画像にまとめられたのでファイル数が少なくなりました。オプション機能を使わないなら必要な画像は3つだけ。CSS と JavaScript は既存のスクリプトにまとめて、画像は別途アップロード。"helpers" はサムネイル表示とかオプション機能を使うときに。

fancyBox
|
+-- source
|
+-- blank.gif(svn:mime-type image/gif)
|
+-- fancybox_loading.gif(svn:mime-type image/gif)
|
+-- fancybox_sprite.png(svn:mime-type image/png)
|
+-- jquery.fancybox.css(既存の CSS にまとめる) |
+-- jquery.fancybox.js(jquery.fancybox.pack.js を使う場合は必要ない) |
+-- jquery.fancybox.pack.js(既存の JavaScript にまとめる)
|
+-- helpers

Picasa からコピペしたタグはリンク先が Picaas のページになっているので、元画像を開けるように jQuery で HTML を書き換え(書き換えについては昔の記事をどうぞ)。

2.0 からデフォルトのクラス名が "grouped_elements" から "fancybox" に変更になっています。アンカーの title 属性を使って Picasa の詳細ページへ飛べるように fancyBox のタイトルを編集します。また、this.titlethis.element で簡単に title 属性の値が拾えるようになったようです。

Picasa の画像を検出するセレクタ名だけ変更すればそのまま使えると思います。細かいところはのちのち調整。

Demo

お試し用にどうぞ。ウィンドウが開いた後に "Show Details" をクリックすると Picasa に飛びます。

fancyBox - Fancy jQuery Lightbox Alternative