lightbox系ライブラリなら手軽で更新しやすい

「画像を綺麗に見せたい」とクライアントから言われたときに、どうしていますか？　今回はギャラリーの作り方を紹介します。

ギャラリーを作る場合にはよくFlashが使われます。しかし、Flashを使うと更新の際にオーサリングの手間がかかったり、ActionScriptで特定のフォルダの画像を順番に読むものを作ると、それなりに工数がかかったりします。

そんな問題を解決できるのが、lightbox系のライブラリを使う方法です。

lightboxとは、元々Lokesh Dhakar氏によって作られたJavaScriptのライブラリのことです[1]⁠。同ライブラリがきっかけで、JavaScriptを使って画像をオーバーレイ表示する効果が「lightbox効果」と言われるようになりました。

現在では、背景がグレーアウトするタイプや、表示されるときのアニメーションが独特なものなど、たくさんのlightbox系スクリプトがあります。

JavaScriptを読み込み、画像にクラスを指定するだけでインタラクティブな動きを手軽に実現できるので、とても便利です。しかも、画像ファイルのネーミングルールを決めておけば、特定のフォルダに画像を追加することでギャラリーの画像を追加することができるため更新性が高く、クライアントに納品する際にも重宝します。

Flashにはない3つの問題

ただ、Flashと違って、3つのことに気をつける必要があります。

1つ目は、ライブラリの動きはカスタマイズが用意でないこと。

JavaScriptを1から組める人なら別ですが、ライブラリはある程度動きや表示のされ方が決まっています。そのため、提案段階でデモを見せるなどして、あとから動きを調整することは難しいことを共有しておく必要があります。

2つ目は、ブラウザでの動作確認状態を知っておくこと。

動きの気持ちいいライブラリを見つけたと思っても、IE6で動かないものもたくさんあります。「⁠後から気づいて、別のものを探さなくてはいけなくなった！」といった状況にならないように、実装前に確認しておきましょう。

最後はライセンスの問題です。

画像を表示する際、クレジット表記とリンクが必要になることがあります。JavaScriptライブラリの場合、ソース中のライセンス表記を残しておけば商用でも利用できることが多いのですが、中には商用で使えないものもあります。きちんと確認しておきましょう。

動きの気持ちいい「prettyPhoto」

lightbox系スクリプトの中には、画像1枚だけではなく、複数の画像をギャラリーとして見せられたり、FlashやYouTubeのコンテンツを読み込めたり、外部サイトをiframeで読み込めるスクリプトがたくさんあります。

今回ご紹介する「prettyPhoto」は、動きがスムーズで気持ちがいいだけでなく、デザインを簡単に変更することができ、コードもシンプルな、使いやすいライブラリです。

ライセンスは「Creative Commons Attribution 2.5」となっており、商用利用も可能となっています。Windows IE6でも動作確認が取れているため、総合的にとても使いやすいものとなっています。

複数の画像を使ったギャラリー

今回は、複数の画像を使ったギャラリーを作ってみます。

アンカーリンク付きのul、liのリストタグで、画像を並べます。

そしてサムネイルをクリックすると、ふわっと画像が大きくなるとともに、背景がグレーアウトするというものです。

API、ライブラリ、CSSを読み込む

それでは、サンプルのソースを見ていきましょう。

<div id="wrap">
  <ul class="gallery clearfix">
    <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]" title="Photographs of some kittens."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="kitten1" /></a></li>
    <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="kitten2" /></a></li>
    <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="kitten3" /></a></li>
    <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="kitten4" /></a></li>
    <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="kitten5" /></a></li>
  </ul>
</div>
<!--wrap end-->

まず、「⁠http://www.google.com/jsapi」を読み込んで、Google AJAX APIを使用します。「⁠google.load("jquery", "1.3");」の箇所で、jQueryの1.3系の最新版を常に読み込むことになります。

その他にも以下を読み込んでいます。

• JavaScript　→　jquery.prettyPhoto.js
• CSS　→　prettyPhoto.css

また、ここでは「style.css」として、独自にコーディングしたCSSを読み込み、ページのスタイルを指定します。

画像と表示するテキストを指定する

次に、bodyタグ内のXHTMLソースを見ていきましょう。

<div id="wrap">
  <ul class="gallery clearfix">
    <li><a href="images/fullscreen/1.jpg" rel="prettyPhoto[gallery1]" title="Photographs of some kittens."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="kitten1" /></a></li>
    <li><a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="kitten2" /></a></li>
    <li><a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="kitten3" /></a></li>
    <li><a href="images/fullscreen/4.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="kitten4" /></a></li>
    <li><a href="images/fullscreen/5.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="kitten5" /></a></li>
  </ul>
</div>
<!--wrap end-->

img srcにはサムネイルの画像ファイルパス、アンカーのリンク先には大きいサイズの画像ファイルパスを記述します。

画像のalt属性のテキストが画像の上にタイトルとして表示されます。

そして、アンカーのtitleタグのテキストが画像の下にキャプションとして表示されます。

ちなみに、今回は1つのギャラリーなのですが、「⁠rel="prettyPhoto[gallery1]"」という部分で[gallery1]、[gallery2]、[gallery3]……とすれば、ギャラリーを分けることもできます。ギャラリーを分けるとそれぞれの合計枚数を出せるので、ギャラリーごとに「○番目 / ○枚中」といった形で表示させることができるようになります。

デザインテーマを自由に変える

body終了タグ直前には、以下のスクリプトを記述しています。

<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$(".gallery a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'});
		});
		</script>

ここは、ギャラリーをラップするulにgalleryクラスを指定しているため、「⁠.gallery a[rel^='prettyPhoto']」と記述しています。

ここではthemeのところでデザインテーマも指定しています。

デザインテーマは、以下のように記述すれば変えることができます。

テーマは5パターン用意されており、背景色やアイコンの画像を変えたり、角丸に表示したりするなど、いろいろアクセントをつけることができます。

prettyPhoto({theme:'facebook'}
prettyPhoto({theme:'dark_rounded'}
prettyPhoto({theme:'dark_square'}
prettyPhoto({theme:'light_rounded'}
prettyPhoto({theme:'light_square'}

今後はHTML5を使ったギャラリーに注目

Appleが「HTML5 and web standards.」というサイトを公開しているのをご存知でしょうか。このHTML5のデモはとても刺激的です。現在はSafariでしか見られませんが、とても魅力的なサンプルが揃っています。

HTML5の普及にはまだ時間がかかりそうですが、HTML5で何ができるのかを知っておくことは、今よりよいユーザーインターフェースを作るための参考になると思います。ぜひ見てみてください。