lytebox是个功能非常强大的lightbox库,比lightbox更强大的是,除了实现图片的lightbox效果外,他也能实现网页的lightbox效果。

使用方法是:

1、下载 Lytebox 的源码及相关图像素材:
http://www.dolem.com/lytebox/

2、把如下代码拷贝到网页的…之间:

3、第3步就是应用Lytebox了。

a,对于图像应用而言,Lytebox提供了三种方案,即:单张图像的显示,多张图像的翻页显示和多种图像以自动播放的幻灯式显示。分别在超级连接中以 rel=”lytebox” 、 rel=”lytebox[vacation]” 和 rel=”lyteshow[vacation]” 来表示。

单张图片的lightbox效果代码:

Image #1

组图的lightbox效果代码:

Mom and Dad
My Sister

组图的lightbox效果自动播放代码(注意:代码中用lyteshow代替了lytebox):

Mom and Dad
My Sister

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

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

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

网页的lightbox效果代码 (注意:代码中用lyteframe代替了lyteboxnote):

rev=”width: 400px; height: 300px; scrolling: no;”>Google Search

Summer Catalog
Winter Catalog

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

目前有1 条留言

  1. 2009年01月26日 22:45 liaodaosi.cn   |  引用  |  #1     

    www.srt***.cn速影

    ifu25,2009-01-27 08:49 AM

    B视一下!!!

发表评论

/ 快捷键:Ctrl+Enter
加载中……