Lightbox JS V2.0

Lightbox JS V2.0是个图片预览程序,摆脱一般在预览缩略图时都会以新视窗开放的不便,以透明的PNG背景让图片在同一页面上开成透明层进而预览图片,只要以鼠标点图,便可关闭浮动层回到原来的画面,非常的实用且美观,更优的是Lightbox JS相容于IE/NS/Firefox等浏览器,独立的JS让安装更容易.

程序演示： http://mysheji.com/blog/attachments/lightbox2/index.html

如何去使用Lightbox JS V2.0?

1.把JS置于<head>与</head>之间

[Copy to clipboard]

CODE:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2.把CSS置于<head>与</head>之间

[Copy to clipboard]

CODE:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3.你可以自由制作更换X与UP,DOWN的图片.

(1).加入个 rel="lightbox" 到你想使用Lightbox的地方. 例子:

[Copy to clipboard]

CODE:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

另:可以更换TITLE里的名字,用于显示图片名称 title="修改为图片说明文字"
(2).如果你想使用几张图片,以UP,DOWN箭头来更换显示. 例子:

[Copy to clipboard]

CODE:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

3.对于一组图片或者多少组图片的数量是没有限制的..行动吧!

程式作者 Lokesh Dhakar
下载地址 http://www.fslesheng.com/lightbox2.rar

[ 本帖最后由 HmilyHeart 于 2006-7-26 08:27 编辑 ]