您的位置首页生活百科

JQuery常用插件大全(1): Lightbox JS

JQuery常用插件大全(1): Lightbox JS

的有关信息介绍如下:

JQuery常用插件大全(1): Lightbox JS

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本.就是一个页面上的弹出式对话框的组件, 它能被快速安装并且运作于所有流行的浏览器.而 JQuery Lightbox 是在 jQuery 框架的基础上实现版本。

本经验分享使用Lightbox JS

在百度搜索中搜索关键词"Lightbox JS",如下图所示。

访问Lightbox官方网站,Download the latest version(下载Lightbox最新版本),如下图所示。

Include the CSS at the top of your page in your tag:

(引入CSS文件再页面的头部标签之间)

Include the Javascript at the bottom of your page before the closing tag:

引入Javascript文件再页面的底部在body标签关闭之前,如下所示。

DOM 结构

Image#1Image#2Image#3Image#4

以上内容设置好即可,会自动调用 Lightbox。

使用说明,如下图所示。

参数说明

注意:目前除了修改源码,不能在调用的时候修改参数(因为是自动调用的,并且参数没有暴露到外部),期待以后的更新能完善该功能。

新建HTML文件,如下图所示。

Lightbox Example

Two Individual Images

image-1

image-1


A Four Image Set

For more information, visit http://lokeshdhakar.com/projects/lightbox2/

jQuery Lightbox2 灯箱效果,如下图所示。