1. 引入  lightbox.css 和 lightbox.js

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

3. 激活

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

　　2、如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名.

　　<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
　　<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
　　<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

轻量级弹出框 lightbox的更多相关文章

  1. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  2. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  3. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

  4. angularjs 弹出框 $modal

    angularjs 弹出框 $modal 标签: angularjs 2015-11-04 09:50 8664人阅读 评论(1) 收藏 举报  分类: Angularjs(3)  $modal只有一 ...

  5. 【代码笔记】iOS-自定义弹出框

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [s ...

  6. Android----消息弹出框

    关于Android的知识,自从工作了就没有什么时间去总结学习过的知识,我个人比较喜欢学习后总结,今天就写一下关于android中消息弹出框的几种方式的简单示例,按照自己的思路写了一段,希望对和我一样在 ...

  7. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  8. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  9. Visual Studio 打开解决方案后 弹出框显示 "正在打开文件..." 迟迟没反应 的解决方法

    Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 ...

随机推荐

  1. webrtc视频数据接收端处理流程详解

  2. 再说Postgres中的高速缓存(cache)

    表的模式信息存放在系统表中,因此要访问表,就需要首先在系统表中取得表的模式信息.对于一个PostgreSQL系统来说,对于系统表和普通表模式的访问是非常频繁的.为了提高这些访问的效率,PostgreS ...

  3. form表单提交和ajax提交优先级

    form中若定义action,那么,ajax将不能执行.form默认提交的请求优先级高于ajax

  4. Cocos2d-x 3.0 Android改动APK名、更改图标、改动屏幕方向、改动版本，一些须要注意的问题

    非常多新手程序员做出一个游戏后,编译成apk安装在手机上.却发现安装程序名和游戏图标都是Cocos2dx默认的,并且默认屏幕方向是横向.那么须要怎么才干改动为自己想要的呢? 打开你创建的project ...

  5. iOS 从应用程序跳转到评价界面

    1,跳转到App Store: NSString *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id% ...

  6. Python 项目实践一（外星人入侵）第一篇

    python断断续续的学了一段实践,基础课程终于看完了,现在跟着做三个小项目,第一个是外星人入侵的小游戏: 一 Pygame pygame 是一组功能强大而有趣的模块,可用于管理图形,动画乃至声音,让 ...

  7. .NET Core 2.0下载和文档

    .NET Core 2.0 RTM 正式版2017/8/14 发布.对应发布 ASP.NET Core 2.0 .EF Core 2.0以及.NET Standard 2.0. 你可以通过 Visua ...

  8. 一个简单的双向链表（C++实现）

    直接上代码,亲测有用. #ifndef __DLINK_H__ #define __DLINK_H__ /* [phead] -> [index0] -> [index1] -> [ ...

  9. linux OSI七层模型、TCP/IP协议栈及每层结构大揭秘

    学习Linux,就算是像小编我这样的小萌新,也知道OSI模型.什么?!你不知道!!! 好吧,这篇秘籍拿走,不谢~~~ 一.两个协议 (1)OSI 协议模型(7层)国际协议    PDU:协议数据单元对 ...

  10. 最受Java开发者青睐的Java应用服务器 —— Tomcat

    Tomcat 是一个小型的轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试 JSP 程序的首选.今天,就一起来了解下 Tomcat. Java 应用服务器 Tomc ...