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. jquery on()动态绑定元素的的点击事件无反应的问题记录

    1.jquery使用版本:v2.0 2.重现代码: html <table class="table"> <thead> <tr> <th ...

  2. 解决failed to push some refs to git

    Administrator@PC-20150110FGWU /K/cocos2d/yc (master) $ git push -u origin master To git@github.com:y ...

  3. Object-Relational Structural Patterns

    Single Table Inheritance Represents an inheritance hierarchy of classes as a single table that has c ...

  4. Objective-C基础语法高速入门

    Objective-C是Mac软件开发领域最基本的开发语言,假如我们对C语言已经非常熟悉或者具有面向对象语言的基础.对于我们学习Objective-C将会非常实用. 方法调用(Calling Meth ...

  5. 一行代码巧妙实现iOS返回button

    一行代码巧妙实现iOS返回button: self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithImage:[ ...

  6. Vue深度学习（1）

    Hello World 现在就让我们来写第一个vue.js的实例.如下代码: html代码: <div id="demo"> {{ message }} </di ...

  7. F01:金融学第一定律：时间的价值

    很小的时候,我们就听大人们讲过:时间就是金钱. 长大了,也觉得这句话应该是对的.我们很珍惜时间,但是似乎没有看到金钱的急剧增加啊.总之,这是模糊,体验感又不强的一句话. 既然谈到时间的价值,价值最容易 ...

  8. Liunx的常用命令

    常用指令 ls 显示文件或目录 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir 创建目录 -p 创建目录,若无父目录,则创建p(paren ...

  9. 自学Zabbix1.3-zabbix进程

    默认情况下zabbix包含5个程序:zabbix_agentd.zabbix_get.zabbix_proxy.zabbix_sender.zabbix_server,另外一个zabbix_java_ ...

  10. MySQL存储过程之游标实战

    MySQL存储过程之游标实战 ​ 博主日前在解决一个项目需求时,没有什么好的方法,于是就来学习存储过程了,之前也是接触过,奈何年少贪玩,竟是全部又还给了大学老师-苦不堪言呐-. ​ 先说一下业务需求吧 ...