本日志标题:Lytebox-很好用的LightBox效果库        [2008-9-19] Bookmark and Share

在网页中,尤其是在用来显示图像的网页中,使用LightBox已经司空见惯了。一直都在使用经典的Lightbox2
http://www.cnbruce.com/blog/showlog.asp?cat_id=34&log_id=1005

不过最近遇到一个网站的修改,其原有的图片点击放大后不再是显示独立的一张大图,而是有内容的网页,用户也认同了LightBox效果,不过Lightbox2不能满足所需,所以在网络上寻了个新的LightBox效果JS库:Lytebox

Lytebox不仅能支持图像展示,还比Lightbox2多了“自动播放图像”的功能,当然最主要的是Lytebox支持弹出网页的效果。

Lytebox最新的版本为v3.22 http://lytebox.com/

使用方法是:

1,下载 Lytebox v3.22的源码及相关图像素材
lytebox_v3.22.zip

2,把如下代码拷贝到网页的<head>...</head>之间


<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />


这可比Lightbox2引用简单多了(Lightbox2引用了三个JS和一个CSS

第3步就是应用Lytebox了。

a,对于图像应用而言,Lytebox提供了三种方案,即:单张图像的显示,多张图像的翻页显示和多种图像以自动播放的幻灯式显示。

分别在超级连接中以 rel="lytebox"rel="lytebox[vacation]"rel="lyteshow[vacation]" 来表示。

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

b,对于网页应用而言,Lytebox提供了两种方案,即:单页面和可以翻页的多页面效果。

分别在超级链接中用 rel="lyteframe"rel="lyteframe[catalog]" 来表示

其中还可以定义窗口大小和滚动条的显示状况 rev="width: 400px; height: 300px; scrolling: no;"

[Ctrl+A 全部选择进行拷贝 提示:可先修改部分代码,再点击运行]

4,如果把lytebox.css和lytebox.js及[images]所有文件存放的目录导致应用了lytebox效果的页面显示不了图像,即修改lytebox.css中的相关background: url




在百度搜索完整的Lytebox-很好用的LightBox效果库内容,或者用Google搜索相关的更多内容

By [cnbruce] at 17:29:35 | 评论 [6] | 浏览 [24522] | TrackBack| 返回顶部

About Comments
看不大明白。但是觉得这个效果应该不错。先复制下去看下效果
http://www.mianfeisuanming.org.cn/
By [dgsydz] at 2008-9-26 9:41:24
我的空间背景
By [蓝冰儿] at 2008-10-6 15:24:53
我做的一个
http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html
By [vvvv] at 2008-10-10 0:00:45
ls的很不错啊
By [阿斯顿] at 2008-10-16 22:16:44
不知道各位有遇到过是示较小的图像时的问题!
By [冰水咖啡] at 2011-1-27 22:24:17
最近又发现一个基于Jquery的弹出图片效果《fancybox》

http://fancybox.net/
By [bruce] at 2011-11-25 16:47:04


Post a Comment
呢称: 验证码: 
禁止笑脸转换 禁止UBB | 缩放输入框:6 5 | [Ctrl+Enter提交](1000个字符限制)