手軽にイメージギャラリーを作成することのできる美しいプラグインです。
 |
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プロパティには現在選択中の画像ファイル名が入っています。
では、次ページで、もうひとつサンプルを試してみます。
