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

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

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

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

…ここからが続き

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

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

デモ 1

デモ 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

デモ 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

デモ 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」と指定して下さい。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article