10-12-09

Picasaにアップした画像で手軽にギャラリーを作れる「pwi」

demo

Picasaウェブ アカウント「lomotani」のアルバム「Genie_3」を表示

memo

作業内容

友達のサイトを作ってると「Photo」というコンテンツがあったのですが、ただ写真を並べて表示させることに何の面白味も感じず、余程素敵な写真だったり頻繁に更新されない限り1度見て終わりやな、と…は言うものの面白いアイデアは浮かばず、それなら気軽に更新できる環境だけでも用意しようと外部サービスを使った表示を調べてみました。

代表的なFrickrとPicasaで比較すると、Frickrの無料アカウントでは10個までしかグループ(アルバム)が作成できなかったため、Picasaに決定。んで、今回はpwiを使わせていただくことにしました。mootoolsを使ったPicasaViewerというのもありましたが、今回はjQueryで進めます。

公開しているアルバムを一覧で表示させ、そこからクリックで各アルバムの写真をずらっと表示させる…のが基本のようですが、ユーザビリティ的に気になる点があったため、demoでは始めから指定したアルバムの写真一覧を表示させるようしております。表示させる画像の枚数やサイズの調整はpwi.js内で可能です。
ちなみに本家のDemoページで詳しく説明されています。

--- demo用コード(head内) ---
<link   href="js/110226/slimbox2.css" rel="stylesheet" type="text/css"/>
<link   href="js/110226/pwi.css" rel="stylesheet" type="text/css"/>
<script src="js/110226/slimbox2.js" type="text/javascript"></script>
<script src="js/110226/pwi.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $("#gallery").pwi({
  username: 'lomotani',
  mode: 'album',
  album: 'Genie_3'
  });
 });
</script>

--- demo用コード(body内) ---
<div id="wrapper" class="clearfix">

サムネイル用の画像を用意したり手間もなく、更新がとても楽です。

参考記事

otani-webs.com / PozuPad / Copyright © 2010 LabPad All Rights Reserved.