ETiV`s Blog

um…充当一回打包党…

原始作者发表在: http://leandrovieira.com/projects/jquery/lightbox/
效果啊, 原始插件的使用方法, 文档啊什么的, 请转到那里观看.

跳到下载

简介

最近在看jQuery, 发现它很好很轻巧. 无意间看到了这个Lightbox效果的jQuery插件. 于是就想到了能不能将其使用在WordPress上. 因为我们现在普遍在用的Lightbox, 都是基于一个庞大而强壮的Prototype.js — 而光这个文件就有49KB之巨.

而我打包的这个插件, 由于使用了轻量级的jQuery, 包括图片整个文件夹才44K.
小巧, 意味着节省流量(当然你可以不在乎这些), 同时也可以缩短你Blog访问者的等待载入的时间.

然后就是效果上. 不同于Prototype版的Lightbox的先自上而下, 而后向两边伸展开的效果.
这个基于jQuery的Lightbox插件是由中心向四周展开. 我更喜欢这种效果.
当然这是一见仁见智的问题.

同时, jQuery的$(document).ready() 也可以及时的将Lightbox效果展现出来.
prototype版, 必须要等到HTML文档中的所有元素(图片, Flash等等…)完全载入之后才会有效果.
而jQuery的$(document).ready(), 则不需要等待图片等等其他可能会占用到载入页面的时间的元素.

最后, 对于基础类库的选择上, 我选择了最新版的jQuery库(发布于2008年1月14日).
据说这个版本的jQuery比之前的版本在找页面元素的时候, 性能提升了300%.(很好, 很强大)

这个插件由Leandro Vieira所做. 而他又是基于Lokesh Dhakar的Lightbox 2所写. 我只是负责简单的把这些文件组织到一起, 打包. 并且使其适合于Wordpress使用. 其中的PHP文件, 也借鉴了prototype版的Lightbox效果wordpress插件.
感谢这三位作者以及jQuery的开发人员们.

下载

安装

1. 将”jQuery.lightbox”(不要改名!!)整个文件夹上传至wp-root/wp-content/plugins/
2. 在后台的插件中, 启用. 即可.

使用方法

同prototype版的类似, 在指向原始文件的链接标签 “<a>” 添加 rel=”lightbox” 属性. 即可展现Lightbox效果.
如果想对图片加以说明, 请在链接标签 “<a>” 中添加 title=”说明文字” 属性.

注意

由于原Lightbox的插件问题, 这个版本不能像prototype版那样可以由 rel=”lightbox“ 这样的代码将一组图片组合成影集.

而是将当前页面中, 所有标记了 rel=”lightbox” 属性的图片都组成到一个影集中, 并且给予Lightbox效果.

同一页面的多图效果, 请到文首给出的地址查看.

效果

已知问题

• 可能与原版Share This插件产生冲突. 可以试试这个版本的Share This

更新记录

1. 2008.01.23: 修正代码以兼容prototype类库

这篇文章发布于 2008年01月21日，星期一，上午 1:46，归类于 Wordpress。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。