【Javascript】jQuery ギャラリープラグインGalleria

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

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

• jQuery
  • jquey.jsのダウンロード
• Galleria
  • デモ1
  • デモ2
  • Galleria ダウンロード
• jQueryのダウンロードと設置

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プロパティには現在選択中の画像ファイル名が入っています。

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