* Lightbox v2.04 作者   Lokesh Dhakar 译 5ivedance

概述:

Lightbox是一个个简单实用的脚本,用来将图片覆盖于当前页面之上。
在所有主流浏览器中安装并使用它是一件相当便捷的事情。

更新 V2.0

相片集:相关图片,快捷导航。
特效:奇妙的过渡性。
向后兼容:可以!

使用方法:

第一步:安装
1. lightbox2使用了Prototype框架和Scriptaculous特效库。将下面Js文件引用到header里面(按照下面的顺序)。

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

2. 引用Lightbox 样式文件(或者将Lightbox的样式添加到你的样式文件中)。

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

3. 检查样式文件,确认调用的图标文件prev.gifnext.gif在正确的路径。
同样要确认在lightbox.js文件头部附近调用的图标文件Loading.gifclose.gif在正确的路径。

第二部:激活
1. 给任何一个链接标签添加一个 rel=”lightbox”属性就可以激活lightbox。比如:

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

另外:可以用title属性添加相片的描述。
2. 如果你想给一组相关相片建立相片集的话,在第一步的基础上用中括号给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>

3. 每一页的相片集数和每一相片集的相片数都是任意的。够屌吧!

帮助:

出错了,图片在新页面打开了,这么回事儿啊?
这个问题一般是由于脚本冲突。检查你的body标签,看下那个onload属性。比如:

<body onload=”MM_preloadImages(‘/images/menu_on.gif’)…;”>

最快捷的解决办法是像这样给onload属性加一个lnitLightbox()

<body onload=”MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()”>

页面没加载完的时候点击无效呀。
脚本只有在加载完了才会运行呢。

覆盖的阴影没有覆盖整个浏览器窗口。
去掉浏览器默认marginpadding属性,在样式表里加上

body{ margin: 0; padding: 0; }

可以在描述里面加入链接不?
可以的,只是你需要把引号、大于、小于等符号 转换成各自的html实体符号。比如:

<a href=”images/image-4.jpg” rel=”lightbox” title=”&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;”>Image</a>

(译者:<a href=”images/image-4.jpg” rel=”lightbox” title=”<a href=”link.html”>my link</a>”>Image</a>——这个是没转义的,当然是让你看到需要改那个link.html的,这样写只是为了方便看,使用的时候需要转义,只能用上面的。)

可以用这个代码显示动画,视频或者其他内容不?
不好意思,只能显示相片。显示其他内容,用google搜索下Lightbox modifications或者试试其他的脚本,像Cody Lindley的 ThickBox.。

这个脚本可以用框架调用不?
如果想用框架,试试Lytebox modification,会有更好的表现。

能不能用于商业项目类?
能,使用许可参照Creative Commons Attribution 2.5 License.。能捐个一子儿半子儿就更好啦,暗示暗示。
出于适当的考虑,唯一的要求是在js文件头部留下我的名字跟链接。做个html链接我会感激的,不过不是必须的。

下载:Download

http://www.open-open.com/ajax/Lightbox.htm