skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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>

jQueryでLightBoxライク画像ギャラリー「piroBox」サンプル

記事作成：2009年05月20日

前の記事：JavaScriptライブラリmootoolsでもコナミコマンド「Konami Code」
次の記事：wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」