Picasaウェブアルバムの画像をLightboxで開くスクリプトを考えてみた

前の記事でPicasaウェブアルバムのことを書いたんですが、Googleが発行するタグだとPicasaウェブに行って戻ってくるのが面倒だったのでLightbox系のプラグインで直接元画像を開けないかやってみました。Picasaの画像はJavaScriptでURLを変更するだけでサムネイルサイズを変更出来るのでとLightbox系プラグインとの相性は良さそうです。

2012年03月28日:ColorBoxからFancyboxにプラグインを変更したためサンプルの動作がColorBoxとは異なります。

jQuery Code Sample

サンプルでは ColorBox プラグインを使用しています。このスクリプトはPicasaウェブアルバムへのリンクを画像URLに置き換えるものです。

以下、行毎の簡単な説明です。

記事エリアからPicasaの画像を探す

var img = $('.articles-body a[href^="https://picasaweb.google.com"]:has("img[src*="googleusercontent.com"]")');

記事エリア(.articles-body)からsrc属性に"googleusercontent.com"が含まれるimg要素を子に持ち、href属性が"https://picasaweb.google.com"で始まるアンカーを探します。

パターンマッチ用にURLを分解する

var a = $(img).eq(i).children('img').attr('src').split('/');

画像のURLを.split()で分解します。サムネイルのパラメータの位置は8つ目に固定されているようなので後の.test()で使用します。これを変数aに代入します。

サムネイルサイズを検出する正規表現を定義する

var regExp = /^[cdhpsw](\d+)?(-[cp])?(-r\d+)?$/;

サムネイル画像のサイズを検出する正規表現です。Picasaのサムネイルにはいくつかのパラメータがあります。パラメータについては こちらのページ にまとめています。

パターンマッチを行う

if(regExp.test(a[7])==1){}

先程分解したURLの8番目の要素でパターンマッチングを行います。

サムネイルサイズを置き換える

a.splice(7,1,"s960");

.splice()で8番目の要素を指定のサイズに変更します。ここでは「長辺960px」としています。オリジナルの画像を呼び出す場合はdを指定します。尚、元のサイズ以上にはなりません。jQueryプラグインで画像のサイズを指定する場合は両方の値を調整して下さい。

URLを結合する

var u = a.join("/");

.join()で配列の区切りに/を入れて結合、変数uに代入します。

元のリンクをtitle属性に移行する

$(img).eq(i)
.attr({
	title:$(img).eq(i).attr('href'),
	href:u,
	rel:'lightbox'
})

元のアンカー要素のhref値をtitle値へ移動します。これはPicasaへのリンクを残すためです。rel="lightbox"を付加するのはColorBoxがページ内の画像をグループ化するためのものです。

.colorbox({
	transition:'fade',
	maxWidth:'95%',
	maxHeight:'95%',
	title:function(){
		var url = $(this).attr('title');
		return '<a href="'+url+'" target="_blank">full size</a>'
	}
});

ColorBoxで開くウィンドウのサイズを縦横それぞれ最大95%にしています。最後に、移行しておいたtitle属性の値を使ってPicasaへのリンクを作成します。

表示サンプル

以下の画像はPicasaウェブアルバムで取得出来るタグをそのまま貼り付けたものです。ColorBoxを使用した場合、各要素にclass="cboxElement"が割り振られます。CSSでのカスタマイズ用に使うことが出来ます。


今回のスクリプトはSo-netブログ用ですが記事エリアが判別出来るのであればコードを少し改変すればその他のブログでも使うことが出来ます。Lightbox系プラグインはFancyboxなどもおすすめです。

Trackback