perfume's space

愛したのはたしかに君だけ そのままの君だけ

lightbox大比拼,对比六种lightbox效果

2007-11-03

关于lightbox,第一次看到他是在一个设计师的博客里,窗口黯淡下来,图片缓缓的打开,美丽的效果让我为之震撼!于是,追寻这它;而自蓝色理想有人汉化lightbox使用方法之后,这两年来已经是广为人知。

我因为之前曾长期追寻lightbox,收集到了多种lightbox效果,可见设计师对他的喜爱程度。以下,就我收集的lightbox中提出六种完整的lightbox效果做出介绍和评价,提供给喜欢lightbox效果的朋友;安装什么的就不再多做介绍了Plants: image 1 0f 4 thumb Plants: image 2 0f 4 thumb Plants: image 3 0f 4 thumb Plants: image 4 0f 4 thumb

lightbox原版 演示: //xsui.com/demo/lightbox/lightbox.html
这个是最早的版本,也是第一个让我震撼的网页特效了。基于prototype,效果流畅,支持键盘翻页,缺点是必须在网页中所有元素载入完毕后才可以使用,最新版本是2.03.3,演示里是最新版本。103K的体积,稍微有些大了。
litebox演示://xsui.com/demo/lightbox/litebox.html
据我所知这个算是比较早的打着精简优化口号的lightbox了,好家伙,直接减肥到24K了,减了79K呢,精简掉了键盘翻页,图片组和单一图片的功能保留,滑动的特效以缩进缩出为主。
litebox超级精简版演示://xsui.com/demo/lightbox/xiao.html
怎么说呢,这个只调用了一个16K大小的JS文件,也算是目前最精简的ligtbox效果了,同之前的litebox一样,没有键盘翻页,其余没有什么变花,特效依然是缩进缩出为主,推荐使用!
moobox演示://xsui.com/demo/lightbox/moobox.html
来自基于mootools的特效库,使用的js只有6K大小,效果比原版的lightbox感觉更是流畅,滑动十分有质感!底部感觉好像是下拉出来的一样;I like mootools!!有保留键盘翻页功能,并且页面图片不载入完毕也可以使用(网页必须载入完),推荐使用!!
slimbox演示://xsui.com/demo/lightbox/slimbox.html
同moobox其实是一个妈生的,基于mootools的特效库,使用的js同样只有6K大小,但js内部有少许不同,不知道是不是改良版,是本站现在在使用的效果,呵呵,不仅底部是以下拉的方式出现,还可以完整的切换会lightbox原版的效果^_^
lytebox演示://xsui.com/demo/lightbox/lytebox.html
OK,最后这一个,保留了lightbox所有的同时,还支持换肤功能,支持自动播放功能,支持嵌入页面功能,支持嵌入页面组的功能,功能强大配合lightbox的效果,酷毙了!!这么多的效果你担心他的体重吗?完全不用担心,lytebox仅仅只使用一个38K大小的JS就能完美的工作,让你享受更多的功能!特别推荐!!

[download=6]OK,暂时就介绍到这里,lightbox的版本远远不止这些,今天挑选的六款都是保留了lightbox招牌的滑动效果的版本,还有各种的lightbox效果在被创作出来,再此之前,提供以上六种版本的lightbox给大家,好好的享受lightbox带来的视觉冲击吧!PS:原创文章,转载请注明出处

18 个留言

sparkle 2007/12/13 - 22:12:19

太仰慕大哥了!
我准备改进一下我网站上的文章浏览中的图片查看了

香水 2007/11/26 - 04:42:27

看看是不是路径问题了,我没有在DZ里试过,帮不上忙了.....

michaelkuo 2007/11/26 - 04:07:04

请问如何在Discuz中运用,我加了半天都没成功,我在DZ风格的header中添加了    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/mootools.v1.11.js"></script>
    <script type="text/javascript" src="js/slimbox.js"></script>
    <link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

并且在后台里为slimbox添加了一个定义为imgx的代码来执行
<a href="{1}" rel="lightbox">
<img border="0" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='按我觀看原尺寸圖片 ';}" src="{1}"></a>
可是点了之后没有效果,从新窗口打开图片了=.=  能否赐教一下..谢谢了..

michaelkuo 2007/11/26 - 04:06:43

请问如何在Discuz中运用,我加了半天都没成功,我在DZ风格的header中添加了    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/mootools.v1.11.js"></script>
    <script type="text/javascript" src="js/slimbox.js"></script>
    <link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

并且在后台里为slimbox添加了一个定义为imgx的代码来执行
<a href="{1}" rel="lightbox">
<img border="0" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='按我觀看原尺寸圖片 ';}" src="{1}"></a>
可是点了之后没有效果,从新窗口打开图片了=.=  能否赐教一下..谢谢了..

Patrick 2007/11/19 - 13:17:48

各位大哥能不能帮我解决一个问题啊!
同样的JS代码,在Body的OnLoad事件中可以正常显示效果,但是为什么用Button的OnClick事件就不行呢?
<script type="text/javascript">
  function OnClick()
  {
    var text = document.createTextNode("Lightbox");
    var a = document.createElement("a");
    a.href = "images/image-1.jpg";
    a.rel = ""lightbox"";
    a.insertBefore(text);
    panel.insertBefore(a);
  }
</script>
</head>
<body onload="OnClick();">
<div id="panel" style="position:absolute; border:1px solid black; width:200px; height:115px; left:100px; top:0px; "></div>
<input id="Button1" type="button" value="button" onclick="OnClick();"/></div>
</body>

游客 2007/11/17 - 01:31:08

很好.不错..谢谢了.

angel 2007/11/16 - 20:20:29

香水大哥真是没话说,无私奉献!支持你!

蝎子 2007/11/14 - 22:15:10

用moo box就不会弹警告窗口了.但遇到flash,lightbox就无效了.你可以看我首页最新一篇日志里的三张图,lightbox无效,因为右边有一个flash音乐播放器.点进日志,就又有效果了。

香水 2007/11/14 - 21:53:32

这个我就没有碰到过了,你可以看看是不是flash自己的问题,没碰到过帮不上忙--!

蝎子 2007/11/14 - 21:26:56

用上了slimbox,不过我发现他的JS跟flash冲突了。
只要页面上有flash就会弹出警告窗口。
比如bo-blog自带的fmp插件播放器。

游客 2007/11/10 - 16:50:48

你好,这个东西我如何在我的博客中用,直接嵌入代码就可以吗?
发布图片的时候,是不是还要注意什么?

游客 2007/11/5 - 21:43:56

之前看到bo-blog官方有人发了lytebox插件,原来是从这里流出来的呵呵,我看到它的演示跟大哥的一样

游客 2007/11/5 - 21:43:07

哇,原来有这么多不同的lightbox效果?喜欢最后一个,牛B啊

凯尔 2007/11/4 - 13:13:59

唉,mootools的js还是和PJBlog相冲突,看来我还是只有自己写了。[emot]cry[/emot]
虽然上面的js都不大,但是mootools.js个头可不小。不知道其中哪些是有用的。

晓阳 2007/11/4 - 11:45:04

LIN你真的太伟大了,我用上了,一会发个图片试试

香水 2007/11/4 - 00:55:59

是呢,我很喜欢喜欢mootools的特效,近来都在研究实际运用中

凯尔 2007/11/4 - 00:49:23

mootools的特效库的确很强大,话说我还是不太清楚它的JS怎么写的,整合得太厉害。

凯尔 2007/11/4 - 00:47:25

太赞了,先收了,继续关注~~

每次过来都可以挖到好东西,嘿嘿~

留言