25
Jan

Wordpress插件:Lightbox 2

wordpress

插件名称:Lightbox 2

插件版本:2.5.0

适用版本:WordPress Version: 1.5 or higher , Compatible up to: 2.3.1

插件地址

插件介绍:Lightbox 2 是一款很酷的图片显示插件,可以让你在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景。使用这款插件,是为了当你的的图片过大必须缩小到页面的宽度时,可以让读者在当前页面浏览完整大小的图片,而不用离开。并且这款插件支持所有主流的浏览器。

Lightbox 2插件很多人都有使用,最早的作者是Lokesh Dhakar,版本一直停留在v2.03.3,并且没有放到Wordpress.org的host上。本文介绍的版本是http://www.stimuli.ca基于原始的Lightbox 2 javascript/css改进,并使用SVN在Wordpress.org上进行更新维护。

同时这个版本还有的特点包括:
提供了Black, White, Grey and Dark Grey四种主题颜色,可以在后台Lightbox 2 Options设置;
在保留了原始的键盘P and N 键进行前进后退的基础上,还使用了 arrow keys 图标扩展;
关闭Lightbox窗口效果图可以使用键盘上的X and Escape 键,或者点击图片外的任何地方;
兼容任何wordpress的主题。

使用方法:

1. 给单张图片加上显示效果,例如:

<a title="标题" href="../原图.jpg" rel="lightbox"><img src="../thumb.jpg"></a>

给原图加上一个rel=”lightbox”的属性,并且还可以使用title属性给图片命名。

2. 给一组图片加上显示效果,例如:

<a href="原图-1.jpg" rel="lightbox[roadtrip]"><img src="../thumb-1.jpg"></a>
<a href="原图-2.jpg" rel="lightbox[roadtrip]"><img src="../thumb-2.jpg"></a>
<a href="原图-3.jpg" rel="lightbox[roadtrip]"><img src="../thumb-3.jpg"></a>

给原图-.jpg加上一个lightbox[roadtrip]的属性,同样可以使用title属性给图片命名,并且对图片数量没有限制。

另外,如果觉得每次都要加上这个属性比较麻烦,可以使用Mdkart制作的lightbox-auto插件,它会自动为你完成这些加属性的工作 :)。

具体的效果,看下图:

UPDATE:使用这款插件要注意,会和AJAX Comments相冲突,在Firefox下不会显示出效果,而在IE和Opera下没有问题。估计应该是外调Prototype、Scriptaculous、Lightview 这三个Javascript 文件和AJAX Comments已有的JS文件有冲突?暂时没有解决办法,所以二选其一吧!

 

Tags: , , ,

Related Posts

8条评论

LEAVE A COMMENT

Comments RSS Feed   TrackBack URL