3つのバリエーションから選べるLightbox風のスクリプト piroBox

Category
： Javascript

「piroBox」はLightboxの様に画像を拡大表示するjQueryのプラグインです。

またデザイン3パターンが準備されおり、自分のサイトにあったテイストに合わせられるって所が便利だと思います。
その「piroBox」の簡単な使い方を解説したいと思います。

piroBoxの使い方・ダウンロード

piroBox v.1.1, jQuery 1.3.1 pluginの下部にあるDownloadから一式ダウンロード出来ます。

デモ 1

<link href="css_pirobox/pirobox_w.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/piroBox_pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('.thumbs').piroBox({
			mySpeed: 500,  
			bg_alpha: 0.7,
			pathLoader : 'url(css_pirobox/ajax-loader_w.gif) center center no-repeat;', 
			gallery : '.pirobox_in li a', 
			gallery_li : '.pirobox_in li', 
			next_class : '.next_in',
			previous_class : '.previous_in'
	});	
	$('.thumbs').piroBox({
			mySpeed: 500, 
			bg_alpha: 0.7,
			pathLoader : 'url(css_pirobox/ajax-loader_w.gif) center center no-repeat;', 
			gallery : '.pirobox li a', 
			gallery_li : '.pirobox li',
			single : '.single  a',
			next_class : '.next',
			previous_class : '.previous'
	});	
});
</script>

デモ 2

<link href="css_pirobox/pirobox_b.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/piroBox_pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('.thumbs').piroBox({
			mySpeed: 500,  
			bg_alpha: 0.8,
			pathLoader : 'url(css_pirobox/ajax-loader_b.gif) center center no-repeat;', 
			gallery : '.pirobox_in li a', 
			gallery_li : '.pirobox_in li', 
			next_class : '.next_in',
			previous_class : '.previous_in'
	});	
	$('.thumbs').piroBox({
			mySpeed: 500, 
			bg_alpha: 0.8,
			pathLoader : 'url(css_pirobox/ajax-loader_b.gif) center center no-repeat;', 
			gallery : '.pirobox li a', 
			gallery_li : '.pirobox li',
			single : '.single  a',
			next_class : '.next',
			previous_class : '.previous'
	});	
});
</script>

デモ 3

<link href="css_pirobox/pirobox_b.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!--OPTIONAL-->
<script type="text/javascript" src="js/piroBox.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 jQuery.easing.def = 'easeOutExpo';<!--OPTIONAL-->

	$('.thumbs').piroBox({
			mySpeed: 900,  
			bg_alpha: 0.8,
			pathLoader : 'url(css_pirobox/ajax-loader_b.gif) center center no-repeat;', 
			gallery : '.pirobox_in li a', 
			gallery_li : '.pirobox_in li', 
			next_class : '.next_in',
			previous_class : '.previous_in'
	});	
	$('.thumbs').piroBox({
			mySpeed: 900, 
			bg_alpha: 0.8,
			pathLoader : 'url(css_pirobox/ajax-loader_b.gif) center center no-repeat;', 
			gallery : '.pirobox li a', 
			gallery_li : '.pirobox li',
			single : '.single  a',
			next_class : '.next',
			previous_class : '.previous'
	});	
});
</script>

piroBoxを使いたい所にclass「pirobox_in」と指定して下さい。