首页 » 技术文档
wordpress图片插件Lightbox 2

　作者：蔡子方　|　发布时间： 2008年10月23日　|　已阅95次

插件名称：Lightbox 2

插件版本：2.5.0

适用版本：WordPress Version: 1.5 or higher

插件下载：

插件介绍：Lightbox 2 是一款很酷的图片显示插件，可以让你在一个平滑展开的新窗口中展现出图片，而同时页面的其余部分都变成黑色背景。使用这款插件，是为了当你的的图片过大必须缩小到页面的宽度时，可以让读者在当前页面浏览完整大小的图片，而不用离开。并且这款插件支持所有主流的浏览器。
第一次看见这种效果是在firefox官网，当时就十分喜欢，想让自己的blog也支持这种效果，因为一直没耐心和时间研究wp所以拖到了今天。
效果演示 http://www.huddletogether.com/projects/lightbox2/
演示中出现的是原作者的网站，而本次插件下载的是http://www.stimuli.ca/lightbox/ 提供的修改版，笔者认为修改版更适合新手使用因为不用修改代码~上传，激活，使用，完事。相比较原作者已经很久没更新了，何去何从自己选择吧。

使用方法
Add a rel="lightbox" For example:

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

If you have a set of related images that you would like to group
For example:

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

个性化
Optionally, go to the Options page and select a new Lightbox colour scheme.

出处：不明。

插件原文说明如下：

How to Use

Part 1 – Setup

Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).

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

Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
```
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
```
Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 – Activate

Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
```
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
```
Optional: Use the title attribute if you want to show a caption.
If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
```
<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>
```
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

原文链接：这里