简介

piroBox是一款JQuery图片放大器插件，采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前、向后控制链接。动态加载图片效果。易于定制。

参数说明：

border          //整数,图片边框，默认是: 0
duration         //整数,动画持续时间，默认:800
perspective      //整数,透视高度，默认: 140
minScale         //整型,背后图像的最小比例， 默认: 0.2
loadingClass     //字符串,加载图片时候把CSS样式加到元素里面，默认: null
before           //函数,下一个图片之前触发
after            //函数,下一个图片之后触发

使用

1.  引入 jquery.js 和 piroBox.js 文件

2.  HTML

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

3.  调用

<script type="text/javascript">
$(document).ready(function() {
$().piroBox({
my_speed: 400, //动画的速度
bg_alpha: 0.1, //背景的透明度
slideShow : true, // true == slideshow on, false == slideshow off
slideSpeed : 4, //幻灯持续的秒数(推荐3 到 6 )
close_all : '.piro_close,.piro_overlay'// 追加类[.piro_overlay](逗号间隔)，如果你想要叠加效果。
});
});
</script>

相关链接

在线演示 ：https://www.jq22.com/yanshi131

官网地址 ：https://www.pirolab.it/