ナビゲーションもわかりやすいLightBox系JavaScriptギャラリー「Thumbox」
LightBoxが流行り始めていくらかの時が流れ亜種がますます増えています。
今回紹介する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>
<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」サンプル
コメントする
記事作成：2010年11月12日 09:01
