标题：Lightbox JS v2.0  
出处：Felix021
时间：Sun, 16 Sep 2007 14:12:35 +0000
作者：felix021
地址：https://www.felix021.com/blog/read.php?324

内容：
Lightbox JS v2.0  
 第1步 - 安装 
Lightbox v2.0 使用JavaScript脚本语言和CSS编写。首先需要把脚本文件引用代码添加到网页文件的head区。  

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


在页面中引用 Lightbox CSS 文件 (也可以把Lightbox样式表直接引入当前页面正在使用的CSS文件中)。  

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


prevlabel.gif 和 nextlabel.gif 确认这两张图片在CSS文件中引用的路径正确。 另外，还需要确认lightbox.js中的loading.gif 和 closelabel.gif引用路径没有错误。  
第2步 - 给图片添加特效 
给每一个超级链接添加一个属性rel="lightbox"。示例：  


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


可选项： 可以使用 title 属性来显示一些批注。  
如果你想建立一个有关链的图片组，只需要紧接着上一步在 rel 属性中使用方括号添加上相同的图片组名就可以了。示例：  

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


注：在每页上使用该效果的图片数量以及每组图片的数量没有限制，但是以上效果只有在网页载入完成后才能发生。  
 
 



Generated by Bo-blog 2.1.0