Picasa の写真の拡大/縮小を簡単に行うことできる jQuery プラグイン

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

Picasa の UI について

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

new picasa


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

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

old picasa


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

share picasa

Picasa Zoom の使い方

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

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


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

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


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

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


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

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


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

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

ダウンロード

こちらからどうぞ。