最新消息:

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

图片幻灯插件 杨红伟 2554浏览 0评论

描述:采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。
兼容浏览器:IE所有浏览器/Firefox/Google Chrome
官方链接: http://www.pirolab.it/pirobox
JS下载: http://www.ijquery.cn/js/piroBox.1_2.js
预览: http://www.ijquery.cn/demo/piroBox
打包下载: http://www.ijquery.cn/demo/piroBox/piroBox.zip
参数说明:

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](逗号间隔),如果你想要叠加效果。

图片展示:

111

222

JS引用代码:

[js]

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/piroBox.1_2_min.js"></script>
<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>

[/js]

HTML代码:

[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>

[/html]

CSS代码:

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

或者

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

或者

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

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址