我的图片网最具个性——制作图片类网站超强浏览特效
站长空间
网页上可实现的功能越来越丰富，一些包含图片文件的网页，用户只要把鼠标移到图片上点击就能在页面中弹出一个新窗口，显示该图像的完整大图，而不须要点击图片链接进入下一页查看了。
对于以图像为主的摄影网站，在网页中设计强大的图像浏览功能显得非常必要。上面这样的效果如何实现呢？借用一个JS特效工具LightBOX2.02就能做到。我们以摄影网站蜂鸟网做个示范。
LightBOX2.02下载地址：http://www.huddletogether.com/projects/lightbox2/#download。
图像浏览效果
在蜂鸟网的首页，有不少由编辑推荐的图片新闻，如果网友要查看每条新闻的详细大图时，需要点击进入下一级页面才能看到，而使用LightBOX2.02的技术，网友只要在图像上点击鼠标就能在网页中打开一个新的窗口，在窗口下方用户可以看到大图，甚至是“编辑推荐”的所有图片的大图片，且在弹出的窗口中看到图像的个数，然后在图像画面的左右方点击按钮查看当前图像的前后两张图像。以下是使用JS代码前后的效果对比如图1所示。
制作超强的浏览功能
下面我们使用LightBOX2.02工具来制作上述图像浏览的效果。
第一步：把下载的LightBOX2.02文件解压后，可看到其中有CSS、JS和Images三个文件夹，把这三个文件夹拷贝到网站程序所在的文件夹根目录中保存。如果网站文件已经包含CSS、JS或Images的文件夹，可把LightBOX对应文件夹下面的具体文件拷贝到网站文件中。
第二步：用Dreamweaver网页制作工具或者记事本程序打开网页文件，在<head>和</head>代码之间，添加如下代码调用LightBOX的JS脚本。
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
第三步：接下来编辑一下需要使用LightBOX特效的图像代码，正常带有链接的图像代码格式为：
<a href="images/image-1.jpg"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
若要使用LightBOX特效，在<a…>中添加“rel="lightbox"”调用LightBOX特效的代码，再加上title标题代码（自定义）加以描述即可，完整的代码为：
<A href="images/image-1.jpg" rel="lightbox" title="点击“close”按钮关闭"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a><br>
第四步：上述介绍的是单张图像调用LightBOX特效的设置方法，如果是想在弹出的窗口中看到多张图像，只要在每个应用了LightBOX特效的图像代码“rel="lightbox"”后增加一个“[plants]”代码（图2），即：<A href="images/image-1.jpg" rel="lightbox[plants]" title="点击图片左侧返回上一张，点击图片右侧进入下一张">< img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>。
所有加入了“[plants]”调用的LightBOX图像就能自动的组合在一起演示了，网友只用鼠标点击一下，不用打开新的页面就能浏览多张图片。当切换图像时，只要在图像左右两边点击鼠标，就能自动打开上一张或下一张图像，非常方便。