jQueryでLightBoxライク画像ギャラリー「piroBox」

食傷気味のLightBoxですが、まだまだ派生JavaScriptは進化を続けています。
jQueryプラグインの「piroBox」を紹介します。

使用方法

piroBoxからファイル一式をダウンロードします。


<link href="pirobox.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="pirobox.js"></script>
<script>
$(document).ready(function(){
	$('.thumbs').piroBox({  
		border: 1, 
		mySpeed: 700,
		borderColor : '#444',  
		bg_alpha: 0.5,
		cap_op_start : 0.4,
		cap_op_end: 0.8,
		pathLoader : 'url(ajax-loader.gif) center center no-repeat;', 
		gallery : '.gallery li a',  //ギャラリーの要素名
		next_class : '.next', //「次へ」の要素名
		previous_class : '.previous' //「前へ」の要素名
	});
});
</script>

あとは下記のように画像を記述すれば完成です。


<div class="gallery">
    <ul>
       <li>
          <a href="拡大画像" title="キャプション"><img src="サムネイル画像" width="200" height="139" /></a>        
       </li>
       <li>
          <a href="拡大画像" title="キャプション"><img src="サムネイル画像" width="200" height="139" /></a>        
       </li>
       //以下画像分
   </ul>
</div>

Javascriptサンプルページ一覧

skuare.net