ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」

LightBoxが流行り始めていくらかの時が流れ亜種がますます増えています。
今回紹介するThumboxもそんな一つではありますが、読み込まれている画像の数を明示できるなどナビゲーションが分かりやすくなっているのが特長です。
ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」サンプル

使用方法
Thumboxからファイル一式をダウンロードします。
※jqueryは1.4.3+で動作するようです。


<link rel="stylesheet" type="text/css" href="thumbox.css" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>	
<script type="text/javascript" src="jquery.thumbox.js"></script>	
<script>
$(function(){	
	$('#id名').thumbox({
		dockPosition:'bottom', //dock(読み込み画像サムネイル一覧)位置 top,bottom
		maxThumbWidth:50, //サムネイルの最大幅
		maxThumbHeight:50, //サムネイルの最大高さ
		labelPosition:'top', //ラベルの位置
		overlayColor : '#FFF' //オーバーレイ色の色
	});
});
</script>
あとは画像をidでくくってあげれば完成です。

<ul id="demo">
	<li><a href="拡大画像パス"><img src="サムネイル画像パス" alt="キャプション" /></a></li>
	<li><a href="拡大画像パス"><img src="サムネイル画像パス" alt="キャプション" /></a></li>
	<li><a href="拡大画像パス"><img src="サムネイル画像パス" alt="キャプション" /></a></li>
	<!-- 以下、画像分 -->
</ul>

オプションは下記のようなものがあります。
オプション 内容 初期値
thumbs サムネイル表示数 5
overlayColor オーバーレイ色 #999
overlayOpacity オーバーレイの透過度 0.8
overlaySpeed オーバーレイ表示速度(ミリ秒) 500
scrollSpeed サムネの移動速度(ミリ秒) 500
zoomSpeed ズーム速度(ミリ秒) 500
showOne クリック前のサムネをひとつだけ表示 false
keyboardNavigation キーボードショートカット true
showLabel キャプション表示 true
labelPosition キャプション位置(top/bottom) bottom
dockPosition サムネ位置(top/bottom) top
maxThumbWidth サムネ最大幅 undefined
maxThumbHeight サムネ最大高さ undefined

ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」サンプル

sponsors

「ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」」をシェアする

記事作成:
記事URL:

TOP > > > ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」