在网页中，尤其是在用来显示图像的网页中，使用LightBox已经司空见惯了。一直都在使用经典的LightBox2：http://www.huddletogether.com/projects/lightbox2/"

不过最近遇到一个网站的修改，其原有的图片点击放大后不再是显示独立的一张大图，而是有内容的网页，用户也认同了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>之间

CSS代码：

<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代码：

<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="https://xiaaijun.com/upload/zm/zm01.jpg" rel="lytebox" title="zm01.jpg">zm01.jpg</a>
<a href="https://xiaaijun.com/upload/zm/zm02.jpg" rel="lytebox" title="zm02.jpg">zm02.jpg</a>
</div>

<div>
<h2>一系列图像打开后，鼠标移动至图像左侧或右侧进行图像的切换浏览：rel="lytebox[vacation]"</h2>
<a href="https://xiaaijun.com/upload/zm/zm03.jpg" rel="lytebox[vacation]" title="zm03.jpg">zm03.jpg</a>
<a href="https://xiaaijun.com/upload/zm/zm04.jpg" rel="lytebox[vacation]" title="zm04.jpg">zm04.jpg</a>
<a href="https://xiaaijun.com/upload/zm/zm05.jpg" rel="lytebox[vacation]" title="zm05.jpg">zm05.jpg</a>
</div>

<div>
<h2>一系列图像打开后，不仅能进行图像的切换浏览，lytebox还允许了自动播放的功能：rel="lyteshow[vacation]"</h2>
<a href="https://xiaaijun.com/upload/zm/zm06.jpg" rel="lyteshow[vacation]" title="zm06.jpg">zm06.jpg</a>
<a href="https://xiaaijun.com/upload/zm/zm07.jpg" rel="lyteshow[vacation]" title="zm07.jpg">zm07.jpg</a>
<a href="https://xiaaijun.com/upload/zm/zm08.jpg" rel="lyteshow[vacation]" title="zm08.jpg">zm08.jpg</a>
</div>

</body>
</html>

b,对于网页应用而言，Lytebox提供了两种方案，即：单页面和可以翻页的多页面效果。
分别在超级链接中用rel="lyteframe" 和 rel="lyteframe[catalog]" 来表示

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

HTML代码：

<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="https://xiaaijun.com" rel="lyteframe" title="萌爸的快乐生活" rev="width: 900px; height: 300px; scrolling: no;">萌爸的快乐生活</a>
<a href="http://www.qiner.org" rel="lyteframe" title="一缕阳光的博客" rev="width: 700px; height: 300px; scrolling: no;">一缕阳光的博客</a>
</div>

<div>
<h2>多页面效果，打开后之间可通过左下角的链接翻页浏览：rel="lyteframe[catalog]"</h2>
<a href="http://www.zimeng.org" rel="lyteframe[catalog]" title="快乐宝宝梓萌" rev="width: 800px; height: 500px; scrolling: no;">zimeng</a>
<a href="https://xiaaijun.com" rel="lyteframe[catalog]" title="萌爸的快乐生活" rev="width: 100px; height: 400px; scrolling: no;">aijun</a>
<a href="http://www.qiner.org" rel="lyteframe[catalog]" title="一缕阳光的博客" rev="width: 700px; height: 500px; scrolling: no;">qiner</a>
</div>

</body>
</html>

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