安装

1.当然是上传你下载的文件啦，这个简单就不说了，但上传后先别激活。

2.Lightbox v2.0 使用Prototype框架和Scriptaculous效果库. 你将需要外调这三个Javascript文件在你的当前模板的 header.php 文件标签中。

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

3.外调Lightbox的CSS文件或添加Lightbox样式（lightbox.css中的所有代码）到你当前模板的样式表中（通常是style.css）。下面代码同样放到header.php的中就可以了。

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

4.检查 lightbox.css 并确定调用的 prev.gif 和 next.gif 文件在正确的位置。同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置。

激活

1.添加rel=”lightbox”属性到任何一个链接标签去激活 lightbox。如:

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

**可以使用 title 属性加上图片说明；通常情况下，如果同一文章下有多个图片链接，只需在任意其中一个图片链接标签中添加 rel=”lightbox” 就可以使同一文章中所有图片实现 Lightbox 效果。

2.如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的分组属性，在中括号中加入图片组名，英文或数字，例如:

<a href=”images/image-1.jpg” rel=”lightbox[groupname]“>image 1 url</a>
<a href=”images/image-2.jpg” rel=”lightbox[groupname]“>image 2 url</a>
<a href=”images/image-3.jpg” rel=”lightbox[groupname]“>image 3 url</a>

**需然没有限定每个页面的图片组数量和每个图片组图片的数量，但如果要群组图片实现上下翻页显示的话，必须在每个图片链接标签中添加代码，否则无法实现；图片是上传自己服务器的朋友用ImageManager实现群组还是比较方便的，有兴趣的可以上网Google一下，这里就不作篇幅了；如果是外接相册图片的朋友，单篇文章图片量比较大时，在写文章时先别急着添加Lightbox代码，等文章写完了把整篇代码复制到任一文本编辑软件里，用替换功能插入代码就方便多了，当然替换后要把代码复制回去Save啦，只有两三张图片的在文章写完后Ctrl+C to Ctrl+V就可以了。

Pages: 1 2