lightbox用法
示例代码:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>lightbox</title>
<link href="css/lightbox.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head> <body>
<section>
<h3>Two Individual Images</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1" /></a>
</div>
<hr />
<h3>A Four Image Set</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>
</section>
<section>
<p>
For more information, visit <a href="http://lokeshdhakar.com/projects/lightbox2/">http://lokeshdhakar.com/projects/lightbox2/</a>
</p>
</section>
<script src="js/lightbox.js"></script>
</body> </html>
官网
https://lokeshdhakar.com/projects/lightbox2/
lightbox用法的更多相关文章
- absolut绝对定位的非绝对定位用法
一.absolute绝对定位的流行用法 一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上.例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提 ...
- Magento Meigee-Glam 主题的用法
Start起点 Package Structure包装结构 License许可证 Installation安装 What's new Updated!更新了什么! Theme options主题选项 ...
- jQuery Lightbox效果插件Boxer
演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...
- EditText 基本用法
title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...
- jquery插件的用法之cookie 插件
一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
- Java中的Socket的用法
Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
- python enumerate 用法
A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
随机推荐
- 一步一步 Pwn RouterOS之exploit构造
前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 前面已经分析完漏洞,并且搭建好了调试环境,本文将介绍如何利用漏洞写 ...
- java 内存分析之方法返回值及匿名对象一
package Demo; public class Point { private double x, y, z; public Point(double _x, double _y, double ...
- .hivehistory
在当前用户的家目录下有个.hivestory文件,里面存放了用户执行的hive操作记录,如下: [hadoop@hadoop1 hive-0.14]$ cat ~/.hivehistory show ...
- zTree自定义节点name显示样式
//setting中配置属性 view: { showLine:false, dblClickExpand: true, showIcon: false, addDiyDom: addDiyDom / ...
- SQLServer中DataLength()和Len()两内置函数的区别
最近工作中遇到了个问题:在数据库中声明字段类型时char(4),但实际只存储了‘DCE’三个字母,程序中拼装以该字段作为key的Map中,会把‘DCE’+空格作为其Key,这样造成用没加空格的‘DCE ...
- NSMapTable、NSHashTable与NSPointerArray的封装
NSMapTable.NSHashTable与NSPointerArray的封装 说明 NSMapTable对应NSDictionary:NSHashTable对应NSSet:NSPointerArr ...
- python-面向过程编程
面向过程: 核心是过程.过程指的是解决问题的步骤,设计一条流水线,机械式的思维方式. 优点:复杂的问题流程化,进而简单化
- Spring Security自定义GrantedAuthority前缀
如果我们正使用Spring Security提供默认的基于方法的权限认证注解如下: @PreAuthorize("hasAnyRole('ADMIN', 'USER')") pub ...
- Altium制作DC002的PCB封装和3D模型
Altium制作DC002的PCB封装和3D模型 常用的电源连接器(Dc Power Jack Connector)DC002.DC005等等型号的3D模型在网上很难找到合适的,我们可以选择CUI 公 ...
- September 09th 2017 Week 36th Saturday
Don't wait to be lonely, to recognize the value of a friend. 不要等到孤独了,才明白朋友的价值. Don't wait to be left ...