lightbox---在web页面中添加图片浏览功能

 

http://www.huddletogether.com/projects/lightbox2

首先去上面的页面看一下特效，能够在web页面中实现象acdsee那样的图片浏览的功能，给单调的页面增色不少。

到目前为止，能实现这样的特效，也只有javascript才能做的这么好。

lightbox是一个用javascript写的组件，专门在web页面中实现图片的浏览。

要把他加到自己的web应用中，并不是多么复杂的事情，lightbox已经替我们做了大量的工作，只要拿过来用就可以了。

首先，要把lightbox下载，放到自己的web应用中。和其他要引用的js文件，css文件放在一起就可以。

但是要注意，css和js中包含所需image图片的路径，最好检查一下，改成自己的绝对路径。

接下来要做的是要把lightbox引进来，

<script type="text/javascript" src="/common/script/3rdParty/lightbox2/js/prototype.js"></script>
<script type="text/javascript" src="/common/script/3rdParty/lightbox2/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/common/script/3rdParty/lightbox2/js/lightbox.js"></script>
<link rel="stylesheet" href="/common/script/3rdParty/lightbox2/css/lightbox.css" type="text/css" media="screen" />

再接下来要做的就是给图片链接加一个rel属性，比如：

<a href="xxx" rel="lightbox">xxx</a>

对了，就是这么简单。

最需要注意的事项，就是lightbox自己图片的路径，以及引用的lightbox的路径，只要路径对，一般不会出现问题。

我在用的时候，遇到一个问题，我的图片不是用静态html代码写的，动态生成，所以lightbox捕捉不到image list。解决办法就是，在动态加载图片后，调用Lightbox.prototype.updateImageList()方法，这样就没有问题了。

http://www.huddletogether.com/projects/lightbox2页面上就有简单的使用帮助。