Lytebox-很好用的LightBox效果库

 
Js/Css/jQuery

在网页中，尤其是在用来显示图像的网页中，使用LightBox已经司空见惯了。一直都在使用经典的Lightbox2

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

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

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

使用方法是：

1，下载 Lytebox v3.22的源码及相关图像素材(本文最后有下载地址)


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


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]


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

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

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


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



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

 点击下载此文件

有话要说