wordpress图片插件Lightbox 2
插件名称: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.gifandnext.giffiles are in the right location. Also, make sure theloading.gifandclose.giffiles as referenced near the top of thelightbox.jsfile 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
titleattribute 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!
原文链接:这里
相关博文:















试用后发觉太慢,可以试试效果,但不推荐使用。因为它需要在header.php调用js,移至footer.php调用可能会好些,但网页仍给人load不完的感觉。
[回复]
--不妨留下您的观点--