イメージギャラリーを作成する超軽量のjQueryプラグイン「bxGallery」

bxGalleryはサムネイル付きのイメージギャラリーを作成するためのjQueryプラグインです。

htmlでリストを作成し、パラメータを指定してあげるだけで動作するようです。
オプションでは、サムネイルの不透明度やサムネイルの位置（上下左右）などが指定できるようです。

詳しくは以下

使い方ですが、まずhtmlでリスト要素を作成します。

	    
<img src="path/to/image1.jpg">
	    
<img src="path/to/image2.jpg">
	    
<img src="path/to/image3.jpg">
	    
<img src="path/to/image4.jpg">

次にプラグインを使用するおまじないをhead部分に追加します。

<script>
$(document).ready(function(){
	$('#pics').bxGallery();
});
</script>

上記ソースの後ろにオプションの設定を追加します。

$('#pics').bxGallery({
	maxwidth: 500,   
	thumbwidth: 75,  
	thumbcrop: false,
	croppercent: .35,
	thumbplacement: 'bottom',
	thumbcontainer: '400',
	opacity: .7,
	load_text: 'loading...',
	load_image: 'spinner.gif',
                   wrapperclass: 'outer'
});

各パラメータの説明は以下になります。

maxwidth

メインの画像の横幅を指定します。

maxheight

メインの画像の高さを指定します。

thumbwidth

サムネイル画像の横幅を指定します。

thumbcrop

trueに設定した場合にサムネイルを正方形になるように切り取ります。
falseの場合は縦横比を維持します。

croppercent

thumbcropにtrueを指定した場合のみ使用します。0から1の範囲を指定。サムネイルをトリミングする際の割合を指定します。

thumbplacement

メイン画像の位置を指定します。位置は上下左右のどこかになります。パラメータには(‘left’, ‘right’, ‘top’, ‘bottom’) のどれかを指定します。

thumbcontainer

サムネイルを表示するコンテナの幅を指定します。

opacity

サムネイル画像の透明度を指定します。サムネイルにマウスオーバーすると指定した透明度から、元の画像にフェードインします。

load_text

イメージギャラリーを読み込んでいる際にテキストを表示する事ができます。このパラメータで表示するテキストの内容を指定できます。

load_image

イメージギャラリーを読み込んでいる際に画像を表示する事ができます。このパラメータはload_textよりも優先されます。

wrapperclass

動的に外側に作成されるdivのidを指定します。

以上で設定は完了です。
かなり使い勝手がよさそうなので、ギャラリー表示を検討されている方はいかがでしょうか。