写真などをスライドショーなどのように展示するライブラリは、Lightboxをはじめいくつかありますが、 今回は、jQuery プラグインからGalleriaを紹介します。

手軽にイメージギャラリーを作成することのできる美しいプラグインです。

Galleriaサンプル


Galleria

Galleriaを使うためには、上記のGalleria ダウンロードのサイトでサイトでgalleria-1.0b.zipなどの最新版の圧縮ファイルを入手します。

解凍すると、(galleria-1.0b.zipの場合は)demoとtrunkの二つのフォルダがあり、demoにはjquery.js(圧縮版のjquery.min.js)とサンプルHTMLとサンプル画像が入っており、 trunkには、galleria.cssとjquery.galleria.jsとlicence.txtが含まれています。

まず、その利用法から見てみます。
<link   type="text/css" 
        href="./galleria.css" 
        rel="stylesheet" media="screen">
<script type="text/javascript" 
        src="./jquery.min.js">
<script type="text/javascript" 
        src="./jquery.galleria.js">
これで、jquery.min.jsとプラグインjquery.galleria.js、にCSSgalleria.cssを読み込み完了し準備が整います。 では、とりあえず、写真は雑多ですが、ひとつ簡単なサンプルを作ってみましょう。

下の画像サムネールをクリックしてみてください。



ソースは次の通り。
<script type="text/javascript">
$(function(){
  $('ul.gallery_test').galleria();
})
</script>

<style type="text/css">
.demo{
  text-align:center;
}
.gallery_test{
  margin:0 auto;
}
.gallery_test li{
  margin: 0 0px;
}
</style>

<div class="demo">
<ul class="gallery_test">
    <li><img src="hituji.jpg" 
             alt="ひつじ" title="ひつじ"></li>
    <li><img src="kame.jpg" 
             alt="亀の足" title="亀の足"></li>
    <li><img src="mon.jpg" 
             alt="浅草雷門" title="浅草雷門"></li>
    <li><img src="dog.jpg" 
             alt="チャー" title="チャー"></li>
    <li><img src="daibutusakura.jpg" 
             alt="牛久大仏と桜" title="牛久大仏と桜"></li>
    <li><img src="daibutu.jpg" 
             alt="牛久大仏" title="牛久大仏"></li>
    <li><img src="atukan.jpg" 
             alt="熱燗" title="熱燗"></li>
</ul>
</div>
スクリプトは、まず、ul 要素下の .gallery_test クラスに対して、galleria()メソッドを実行しています。

HTMLの基本構成は、ulとli要素に並べたimg要素です。
<ul class="gallery_test">
    <li><img src="hituji.jpg" 
             alt="ひつじ" title="ひつじ"></li>
</ul>
これで自動的にサムネールが生成されてクリック待ちとなります。

これだけでサムネールをクリックするとメイン画像が切り替わるギャラリーができ上がるわけです。

Galleriaサイトにあるデモ1などは非常に美しいですが、 このシンプルなソースを基本として、CSSで飾り、jQueryのエフェクトをかけることで実現しています。

もし、オリジナルのサムネールを用意したいときは、画像をa要素で囲んで次のようにします。この場合は、img要素のsrcへサムネール画像を書いておきます。
<ul class="gallery_test">
    <li><a href="hituji.jpg"  
title="ひつじ"><img
src="hituji-thum.jpg"
alt="ひつじ"></a>
</li> </ul>
また、縮小によるサムネールではなくセンタートリミングによるサムネールがほしい時は、img要素に class="noscale" を追加します。
<ul class="gallery_test">
    <li><img class="noscale" src="hituji.jpg" 
             alt="ひつじ" title="ひつじ"></li>
</ul>
次のように、prev()やnext()メソッドを使うことで、画像を移動することもできます。
<a href="#" onclick="$.galleria.prev(); return false;">前</a> 
<a href="#" onclick="$.galleria.next(); return false;">次</a>
この他、$.galleria.currentプロパティには現在選択中の画像ファイル名が入っています。

では、次ページで、もうひとつサンプルを試してみます。