Google Picasa ウェブアルバムの写真をスライドショーで表示する

旅先の写真をWebサイトで公開してみました。Google Picasa ウェブアルバムにアップロードした写真を Galleria でスライドショー表示しています。

こちらを参考にさせていただきました。

Picasaの写真はJSONPで簡単に取得できます。下記形式のURLをscriptタグで読み込むとpicasaCallbackAlbum()が実行されます。引数にアルバムリストが渡されるので、写真をスライドショーに追加していくという流れになります。

http://picasaweb.google.co.jp/data/feed/api/user/ユーザID/albumid/アルバムID*1?kind=photo&alt=json-in-script&callback=picasaCallbackAlbum

Exif情報も取得できるので使い道は無限に広がります。

<div id="loading">読み込んでいます...</div>
<div id="gallary"></div>
<script type="text/javascript">//<![CDATA[
function picasaCallbackAlbum(response){
  $('#gallary').hide();
  $(response.feed.entry).each(function(key,entry){
    $('#gallary').append($(document.createElement('img'))
      .attr('src', entry.media$group.media$content[0].url)
      .attr('width', entry.media$group.media$content[0].width)
      .attr('height', entry.media$group.media$content[0].height)
      .attr('alt', entry.summary.$t
        +' '
        +new Date(entry.exif$tags.exif$time.$t-9*60*60*1000).toLocaleString());
  });
  Galleria.loadTheme('/js/themes/galleria.classic.js');
  $('#gallary').galleria({max_scale_ratio:1});
  $('#gallary').show();
  $('#loading').empty();
}//]]></script>
<script type="text/javascript" src="/js/galleria.js"></script>
<script type="text/javascript" src="http://picasaweb.google.co.jp/data/feed/api/user/ユーザID/albumid/アルバムID?kind=photo&alt=json-in-script&callback=picasaCallbackAlbum"></script>