Lightbox JS v2.0

概要：

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.

最新更新 Version 2.0

图片集: 分组相关的图片并且能轻松的导航它们
视觉特效: 奇特的自适应调整
向后兼容: yes!
点击这里查看实例演示

如何使用:

步骤 1 - 安装

1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

步骤 2 - 激活

1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="p_w_picpaths/p_w_picpath-1.jpg" rel="lightbox" title="my caption">p_w_picpath #1</a>
可选择项: 使用 title 属性加上说明.

2、如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="p_w_picpaths/p_w_picpath-1.jpg" rel="lightbox[roadtrip]">p_w_picpath #1</a>
<a href="p_w_picpaths/p_w_picpath-2.jpg" rel="lightbox[roadtrip]">p_w_picpath #2</a>
<a href="p_w_picpaths/p_w_picpath-3.jpg" rel="lightbox[roadtrip]">p_w_picpath #3</a>

3、没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了！

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/yefengzhixia/archive/2009/05/05/4150626.aspx

转载于:https://blog.51cto.com/657956565/200856

Lightbox JS v2.0相关推荐

如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
html 截取指定字符串长度,前端js截取指定长度个数字符 v2.0.0
2.0版本比1.0版本使用时更简洁,无需在设置媒体类型,直接设置数量就可以了这里是文章测试标题,含标点一共二十个字. 这里是文章测试标题,含标点一共二十个字. 这里是文章测试标题,含标点一共二十个字 ...
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
DotNetTextBox V2.0 Web Control(ASP.NET2.0 增强型TextBox控件,完全支持AJAX.NET)
[控件界面] [控件介绍] 名称:DotNetTextBox V2.0 Web Control 免费无限制版类型:ASP.NET2.0 增强型TextBox控件作者: 小宝.NET2.0 主页:h ...
小孔子文章管理系统V2.0发布测试
小孔子文章管理系统V2.0 [感谢] 本系统是仿照nbArticle开发,在此表示感谢nb联盟的作品. [版权声明] ...
EasyImage图床源码V2.0
介绍: EasyImage图床源码V2.0,PHP语言,无数据库,支持多文件上传,返回图片url,markdown,bbscode,html的一款图床程序. 使用的zui的前端自适应模板,以html5 ...
db2v9/9.5高级应用开发_使用 Vue.js 2.0 开发单页应用
来源 | https://www.sitepoint.com/up-and-running-vue-js-2-0/ 早在去年9月份,流行的 JavaScript 框架 Vue.js 就发布了 V2 版 ...
python提取excel前十行生成图_Python读取Excel数据生成图表 v2.0
Python读取Excel数据生成图表 v2.0 一.需求背景自己一直在做一个周基金定投模拟,每周需要添加一行数据,并生成图表.以前一直是用Excel实现的.但数据行多后,图表大小调整总是不太方便, ...
phonegap-百度社会化分享-andriod插件-v2.0
技术的发展和完善,简直让人跟不上.前段时间才开放了一个百度社会化分享插件,没几个月百度的社会化分享sdk都升级了.而且增加了一些其他的特性,增加qq好友分享,优化了微信分享. 所以今天又基于新的sdk ...

Lightbox JS v2.0

Lightbox JS v2.0相关推荐

最新文章

热门文章