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函数: ...
随机推荐
- IOT安全
相关资源 IOT 漏洞 top 10 https://xz.aliyun.com/t/2278 https://www.owasp.org/images/8/8e/Infographic-v1.jpg ...
- android--Git上克隆项目遇到的坑
直接上图,首先你得有你得GitHub项目地址,如下: 然后打开android studio,选择新建项目时从Git上克隆: 点击clone等待完成,新窗口打开. 打开之后可能.或许.大概.也许会出现下 ...
- 多表批量导出txt及打压缩包下载
在一些特殊的业务系统中,有些客户查看报表数据时不需要在浏览器上逐一查看,需要在页面端选择要查看的报表名称(可多选),选择条件,然后将所选中的报表批量导出到txt文件中并且要把批量导出的结果文件打 ...
- 为什么不要使用 select * from xxx (oracle 亲测)
打开已用时间set timing on;create table users(id number(20), name varchar2(20), password varchar2(20));inse ...
- mysql常用语句备忘
1.连接本地数据库 mysql -h localhost -u root -p123 2.连接远程数据库 mysql -h 192.168.0.201 -P 3306 -u root -p123 3. ...
- 初探diskstats
内核很多重要子系统均通过proc文件的方式,将自身的一些统计信息输出,方便最终用户查看各子系统的运行状态,这些统计信息被称为metrics. 直接查看metrics并不能获取到有用的信息,一般都是由特 ...
- Oracle EBS AP 已经完全付款的发票仍然可以选择并进行零金额的付款
1>找出相应的发票; SELECT DISTINCT ai.invoice_id, ai.invoice_num invoice_num, pv.segment1 vendor_num, pv. ...
- SCCM OS播发
SCCM OS播发1.在分发点启用PXE支持2.将启动映像包分发到分发点:需要将x86和x64都分发到分发点,如果只分发x64,在客户端pxe启动时会出现 no response from wds s ...
- 解决linux buffer/cache 消耗内存过高引发的问题
工作中接到DBA报障某台服务器 跑一些大的数据,服务器就无法远程连接,报错,抓过日志叫DELL工程师检测也没问题,系统也重装过, 现在些一些较大的数据就会报如 图错误,由于服务器远在异地城市IDC机房 ...
- win10不错的快捷键
A I S number 左右 上下 , Win键 Open Action center. Open Settings. Open Search. Open the app pinned to t ...