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. Material04 MdCardModule和MdButtonModule综合运用

    设计需求:设计一个登陆页面 1 模块导入 1.1 将MdCardModule和MdButtonModule模块导入到共享模块中 import { NgModule } from '@angular/c ...

  2. Linux性能及调优指南（翻译）之Linux进程管理

    本文为IBM RedBook的Linux Performanceand Tuning Guidelines的1.1节的翻译原文地址:http://www.redbooks.ibm.com/redpap ...

  3. java上传图片剪切工具类

    package com.up.util; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io. ...

  4. Parcel.js + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  5. spring框架整合springMVC时关于AOP无法切入的问题

    最开始springMVC的配置为: spring的配置为: 分析可知道spring的配置正确,由于在springmvc中已经扫描了@Controller相关的注解,所以就不需要再次扫描了,由于spri ...

  6. 十六、Spring Boot 部署与服务配置

    spring Boot 其默认是集成web容器的,启动方式由像普通Java程序一样,main函数入口启动.其内置Tomcat容器或Jetty容器,具体由配置来决定(默认Tomcat).当然你也可以将项 ...

  7. Asp.Net Web API（三）

    Routing Tables路由表 在Asp.Net Web API中,一个控制器就是一个处理HTTP请求的类,控制器的public方法就被叫做action方法或简单的Action.当Web API接 ...

  8. 2. whoami，常用包，调优selinux,七种启动模式，系统开机服务

    1   whoami  查看当前登录用户      useradd zhang   增加用户      passwd  zhang       su - zhang     切换用户        e ...

  9. 【java设计模式】责任链模式

    可以随时添加过滤器,并在主方法中添加删除: Main package com.tn.filter; public class Main { public static void main(String ...

  10. Java思维导图之Class对象

    Class对象相关知识导图: 导图源文件保存地址:https://github.com/wanghaoxi3000/xmind