Lytebox-很好用的LightBox效果库

作者：yangguang lan 文章来源：不明点击数：853 发布时间：2008-9-25 14:38:55

三达创业:Lytebox-很好用的LightBox效果库网站建设项目

http://www.cnbruce.com/blog/showlog.asp?log_id=1327 演示地址

在网页中，尤其是在用来显示图像的网页中，使用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://dolem.com/lytebox/

使用方法是：

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]" 来表示。
<html> <head> <title>lytebox demo</title> <script type="text/javascript" language="javascript" src="/lytebox/lytebox.js"></script> <link rel="stylesheet" href="/lytebox/lytebox.css" type="text/css" media="screen" /> </head> <body> <div> <h2>单独图像显示，图像打开后之间没有链接翻页浏览：rel="lytebox"</h2> <a href="http://www.cnbruce.com/blog/images/2008-1.jpg" rel="lytebox" title="2008-1.jpg">2008-1.jpg</a> <a href="http://www.cnbruce.com/blog/images/2008-2.jpg" rel="lytebox" title="2008-2.jpg">2008-2.jpg</a> </div> <div> <h2>一系列图像打开后，鼠标移动至图像左侧或右侧进行图像的切换浏览：rel="lytebox[vacation]"</h2> <a href="http://www.cnbruce.com/blog/images/2008-3.jpg" rel="lytebox[vacation]" title="2008-3.jpg">2008-3.jpg</a> <a href="http://www.cnbruce.com/blog/images/2008-4.jpg" rel="lytebox[vacation]" title="2008-4.jpg">2008-4.jpg</a> <a href="http://www.cnbruce.com/blog/images/2008-5.gif" rel="lytebox[vacation]" title="2008-5.gif">2008-5.gif</a> </div> <div> <h2>一系列图像打开后，不仅能进行图像的切换浏览，lytebox还允许了自动播放的功能：rel="lyteshow[vacation]"</h2> <a href="http://www.cnbruce.com/blog/images/2008-6.gif" rel="lyteshow[vacation]" title="2008-6.gif">2008-6.gif</a> <a href="http://www.cnbruce.com/blog/images/2008-7.jpg" rel="lyteshow[vacation]" title="2008-7.jpg">2008-7.jpg</a> <a href="http://www.cnbruce.com/blog/images/2008-8.jpg" rel="lyteshow[vacation]" title="2008-8.jpg">2008-8.jpg</a> </div> </body> </html>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

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

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

其中还可以定义窗口大小和滚动条的显示状况 rev="width: 400px; height: 300px; scrolling: no;"
<html> <head> <title>lytebox demo</title> <script type="text/javascript" language="javascript" src="/lytebox/lytebox.js"></script> <link rel="stylesheet" href="/lytebox/lytebox.css" type="text/css" media="screen" /> </head> <body> <div> <h2>单页面效果，打开后之间没有链接翻页浏览：rel="lyteframe"</h2> <a href="http://www.dw8.cn" rel="lyteframe" title="Dreamweaver教程" rev="width: 800px; height: 300px; scrolling: no;">DW8</a> <a href="http://www.cnbruce.com/" rel="lyteframe" title="布鲁斯狼的BLOG" rev="width: 400px; height: 300px; scrolling: no;">cnbruce</a> </div> <div> <h2>多页面效果，打开后之间可通过左下角的链接翻页浏览：rel="lyteframe[catalog]"</h2> <a href="http://www.i0514.cn" rel="lyteframe[catalog]" title="小艾生活网" rev="width: 1000px; height: 500px; scrolling: no;">i0514</a> <a href="http://www.dw8.cn" rel="lyteframe[catalog]" title="Dreamweaver教程" rev="width: 800px; height: 400px; scrolling: no;">DW8</a> <a href="http://www.cnbruce.com/" rel="lyteframe[catalog]" title="布鲁斯狼的BLOG" rev="width: 700px; height: 500px; scrolling: no;">cnbruce</a> </div> </body> </html>
[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

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

抄袭易都网站的站点曝光改过来的网站 WEB3.0 如何选择一个理想的网站建设公司？

网站首页

经典案例

网站设计

解决方案

网络营销

网站优化

SEO专区

sitemap

客户支持

友情链接