通过Lightbox JS 实现Ajax效果的图片预览

作者: Aion 日期: 2006-05-23 14:45

字体大小: 小中大

Lightbox JS V2.0 图片预览程序解决了浏览图片的缩略图时，浏览器总是要新开一个窗口的不方便。完全实现了在同一个页面中进行图片浏览的功能。程序简单、实用、美观并且兼容IE/NS/Firefox 等浏览器

步骤

第一：下载源文件 lightbox2.02.zip 解压并上传至服务器
注：如果图片路径有差异（指的是压缩包中images与站点中的images存在重名等问题，可能需要修改），需要对文件做些简单的修改（修改lightbox.css和lightbox.js中的图片路径images即可）

第二：在首页<head></head>内，添加如下代码（脚本文件和CSS样式表）：
<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><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

第三：单图显示代码（情形一）
<a href="images/image-1.jpg" rel="lightbox" title="描述">image #1</a>
注：
①设置完<head>后，只需要给图片链接设置一个rel="lightbox"属性即可；
②给链接加上 title="描述" 属性可以添加一些图片说明文字

第四：组图显示代码（情形二）
<a href="images/image-1.jpg" rel="lightbox[描述]">image #1</a> <a href="images/image-2.jpg" rel="lightbox[描述]">image #2</a> <a href="images/image-3.jpg" rel="lightbox[描述]">image #3</a>
注：组图显示时，只需使方括号中的字名称相同即可，如rel="lightbox[Aniko]"

第五：上面是大部分情况，如果是在PJBLog（采用FCKeditor编辑文本）中需要稍作修改
（1）步骤二中代码应该插入到header.asp中，而不是default.asp中
（2）单图显示代码修改如下
<a title="描述" href="images/image-1.jpg" rel="lightbox"><img alt="" src="images/image-1.jpg" border="0" /></a>
（3）组图显示代码修改如下
<a title="描述" href="images/image-3.jpg" rel="lightbox[描述]"><img alt="" src="images/thumb-3.jpg" border="0" /></a>
<a title="描述" href="images/image-4.jpg" rel="lightbox[描述]"><img alt="" src="images/thumb-4.jpg" border="0" /></a>
<a title="描述" href="images/image-5.jpg" rel="lightbox[描述]"><img alt="" src="images/thumb-5.jpg" border="0" /></a>