第15款插件:piroBox图片橱窗效果插件

描述：采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。

兼容浏览器：IE所有浏览器/Firefox/Google Chrome

官方链接： http://www.pirolab.it/pirobox

JS下载： http://ijquery.360sites.cn/js/piroBox.1_2.js

预览： http://ijquery.360sites.cn/demo/piroBox

打包下载： http://ijquery.360sites.cn/demo/piroBox/piroBox.zip

参数说明：

1. my_speed: 400, //动画的速度
   
2. bg_alpha: 0.1, //背景的透明度
   
3. slideShow : true, // true == slideshow on, false == slideshow off
   
4. slideSpeed : 4, //幻灯持续的秒数(推荐3 到 6 )
   
5. close_all : '.piro_close,.piro_overlay'// 追加类[.piro_overlay](逗号间隔)，如果你想要叠加效果。       

复制代码

图片展示：





JS引用代码：

1. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.4.2.min.js"></script>
   
2. <script type="text/javascript" src="http://ijquery.360sites.cn/js/piroBox.1_2_min.js"></script>
   
3. <script type="text/javascript">
   
4.         $(document).ready(function() {
   
5.                 $().piroBox({
   
6.                         my_speed: 400, //动画的速度
   
7.                         bg_alpha: 0.1, //背景的透明度
   
8.                         slideShow : true, // true == slideshow on, false == slideshow off
   
9.                         slideSpeed : 4, //幻灯持续的秒数(推荐3 到 6 )
   
10.                         close_all : '.piro_close,.piro_overlay'// 追加类[.piro_overlay](逗号间隔)，如果你想要叠加效果。        
    
11.                 });
    
12.         });
    
13. </script>

复制代码

HTML代码：

1. <div style="float:left; width:900px; display:block;">
   
2.         <div class="demo"><a href="images/1.jpg" class="pirobox_gall" title="Spain 2009"><img src="images/1s.jpg"  /></a></div>
   
3.         <div class="demo"><a href="images/2.jpg" class="pirobox_gall" title="Nadia!!"><img src="images/2s.jpg"  /></a></div>
   
4.         <div class="demo"><a href="images/3.jpg" class="pirobox_gall" title="Corsica 2008"><img src="images/3s.jpg"  /></a></div>
   
5.         <div class="demo"><a href="images/4.jpg" class="pirobox_gall" title="Sunset in Rome"><img src="images/4s.jpg"  /></a></div>
   
6.         <div class="demo"><a href="images/6.jpg" class="pirobox_gall" title="Portugal 2009 (Castle)"><img src="images/6s.jpg"  /></a></div>
   
7.         <div class="demo"><a href="images/7.jpg" class="pirobox_gall" title="Portugal 2009 (Surfers Beach)"><img src="images/7s.jpg"  /></a></div>
   
8.         <div class="demo"><a href="images/8.jpg" class="pirobox_gall" title="Portugal 2009, Lisbon story!!"><img src="images/8s.jpg"  /></a></div>
   
9.         <div class="demo"><a href="images/10.jpg" class="pirobox_gall" title="Portugal 2009 (Templar castle)"><img src="images/10s.jpg"  /></a></div>
   
10.         <div class="demo"><a href="images/11.jpg" class="pirobox_gall" title="Portugal 2009 (Lisbon area Alfama)"><img src="images/11s.jpg"  /></a></div>
    
11.         <div class="demo"><a href="images/12.jpg" class="pirobox_gall" title="Portugal 2009 (Lisbon area Alfama)"><img src="images/12s.jpg"  /></a></div>
    
12.         <div class="demo"><a href="images/13.jpg" class="pirobox_gall" title="Portugal 2009 (Lisbon transport)"><img src="images/13s.jpg"  /></a></div>
    
13.         <div class="demo"><a href="images/14.jpg" class="pirobox_gall" title="Portugal 2009 (Sintra wolf's reserve)"><img src="images/14s.jpg"  /></a></div>
    
14.         <div class="demo"><a href="images/15.jpg" class="pirobox_gall" title="Portugal 2009 (Is she drunk??)"><img src="images/15s.jpg"  /></a></div>
    
15.         <div class="demo"><a href="images/16.jpg" class="pirobox_gall" title="Barcellona 2009, Ghotic area"><img src="images/16s.jpg"  /></a></div>
    
16.         <div class="demo"><a href="images/17.jpg" class="pirobox_gall" title="Barcellona 2009, Ghotic area (Gargoyle)"><img src="images/17s.jpg"  /></a></div>
    
17.         <div class="demo"><a href="images/18.jpg" class="pirobox_gall" title="Copenaghen 2009"><img src="images/18s.jpg"  /></a></div>
    
18.         <div class="demo"><a href="images/20.jpg" class="pirobox_gall" title="Copenaghen 2009"><img src="images/20s.jpg"  /></a></div>
    
19.         <div class="demo"><a href="images/21.jpg" class="pirobox_gall" title="Copenaghen 2009 (Christiania)"><img src="images/21s.jpg"  /></a></div>
    
20.         <div class="demo"><a href="images/22.jpg" class="pirobox_gall" title="Copenaghen 2009 (Christiania)"><img src="images/22s.jpg"  /></a></div>
    
21.         <div class="demo"><a href="images/23.jpg" class="pirobox_gall" title="Copenaghen 2009 (Helsingborg castle, Amlet's room)"><img src="images/23s.jpg"  /></a></div>
    
22.         <div class="demo"><a href="images/24.jpg" class="pirobox_gall" title="Copenaghen 2009 (Helsingborg castle,statue of a Viking  )"><img src="images/24s.jpg"  /></a></div>
    
23. </div>

复制代码

CSS代码：

1. <link rel="stylesheet" type="text/css" href="css/white/style.css" media="screen" />

复制代码

或者

1. <link rel="stylesheet" type="text/css" href="css/black/style.css" media="screen" />

复制代码

或者

1. <link rel="stylesheet" type="text/css" href="css/shadow/style.css" media="screen" />

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=15