皆さん、Google の写真共有サービス「Picasa」をご利用でしょうか？ 2048×2048ピクセル以下の画像であれば容量が実質無制限であることもあり、自分の場合、ブログの掲載写真等に使用してます。
Picasa Zoom は Picasa で管理された写真の拡大／縮小を簡単に行うことできる jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

Picasa の UI について

はじめに Picasa の管理画面の UI についてですが、いつからか Google+ と統合されてしまいデザイン性は良い？のですが、使いづらいものになってしまいました。

以下のように URL の後ろに ?noredirect=1 を付けることで旧 UI に戻すことができます。

https://picasaweb.google.com/home?noredirect=1

アルバムの共有設定をすることで、各種サイズの画像 URL を取得できます。

Picasa Zoom の使い方

jQuery、Picasa Zoom（または jQuery Sitekit）の JS、CSS ファイルを読み込みます。

<link href="jquery.picasa-zoom.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.picasa-zoom.js"></script>

以下の様に、s144 サイズの画像を img タグで表示します。（サイズはパラメータで変更可能）

<img class="sample" src="https://lh3.googleusercontent.com/-G6nLtMfbiLo/U5MsQOqfOLI/AAAAAAAAHVM/IVpWzJbVhZI/s144/IMG_1768.png"/>

対象の img タグに対し picasaZoom() メソッドを実行すると、画像のクリックで拡大／縮小表示が行われるようになります。

$('img.sample').picasaZoom();

適用する画像サイズを変更する場合は、以下のように thumKey（縮小時）、pictKey（拡大時）パラメータでサイズを s144, s288, s400, s640, s800 より選択し指定します。

$('img.sample').picasaZoom({
    thumKey : '/s288/',
    pictKey : '/s640/'
});

内部処理的には、単純に通常サイズの画像 URL とサムネイルサイズの画像 URL を差し替えてるたけなので、Picasa 以外の画像に対しても適用できます。 例えば、通常サイズの画像が img/ フォルダにあり、サムネイルサイズの画像が img/thum/ にある場合は、以下のように記述します。

$('img.sample').picasaZoom({
    thumKey : '/img/thum/',
    pictKey : '/img/'
});

ダウンロード

こちらからどうぞ。

• jquery.sitekit – GitHub