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>之间
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>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
2.把CSS置于<head>与</head>之间
CODE:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3.你可以自由制作更换X与UP,DOWN的图片.
(1).加入个 rel="lightbox" 到你想使用Lightbox的地方. 例子:
CODE:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
另:可以更换TITLE里的名字,用于显示图片名称 title="修改为图片说明文字"
(2).如果你想使用几张图片,以UP,DOWN箭头来更换显示. 例子:
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>
<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 编辑 ]
1022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
