示例代码:

<!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用法的更多相关文章

  1. absolut绝对定位的非绝对定位用法

    一.absolute绝对定位的流行用法 一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上.例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提 ...

  2. Magento Meigee-Glam 主题的用法

    Start起点 Package Structure包装结构 License许可证 Installation安装 What's new Updated!更新了什么! Theme options主题选项 ...

  3. jQuery Lightbox效果插件Boxer

    演示:http://www.jq22.com/yanshi1139 下载:链接: https://pan.baidu.com/s/1o8zaV2q 密码: 2ccy Boxer 是一款基于 jQuer ...

  4. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  5. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  6. Java中的Socket的用法

                                   Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...

  7. [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法

    一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...

  8. python enumerate 用法

    A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...

  9. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

随机推荐

  1. Attack Top Chunk之 bcloud

    前言 这是 bctf 2016 的题,链接 https://github.com/ctfs/write-ups-2016/tree/master/bctf-2016/exploit/bcloud-20 ...

  2. url override and HttpSession implements session

    背景 HttpSession默认使用Cookie存储Session ID,如果在用户禁用浏览器Cookie的功能后,仍打算运用HttpSession来进行会话管理,那么可以搭配URL重写来实现. 实现 ...

  3. Linux 启动脚本及chkconfig命令之自启动服务

    有时我们会碰到这样的情况,系统启动的时候报一大堆无法连接mysql的错误,问题在mysql数据库还没有启动的时候已经启动了一些需要连接mysql数据库的服务.这样我们就得修改启动顺序,把需要连接mys ...

  4. python利用unittest进行测试用例执行的几种方式

      利用python进行测试时,测试用例的加载方式有2种:  一种是通过unittest.main()来启动所需测试的测试模块:  一种是添加到testsuite集合中再加载所有的被测试对象,而tes ...

  5. DELETE语句总结

    一.基本语句 1.SQL DELETE 语法 DELETE FROM table_name WHERE condition; 请注意 删除表格中的记录时要小心!注意SQL DELETE 语句中的 WH ...

  6. 如何让你的Ssh连接,更加安全?

    希望你会涨姿势. First: vim /etc/ssh/sshd_config 在Port 22下面加一行,以端口1438为例,Port 1438 然后保存,重启ssh服务 systemctl re ...

  7. python之系统命令

    subprocess执行系统命令 call:执行命令,返回状态码 #!/usr/bin/env python # _*_ coding:utf-8 _*_ __Author__ = 'KongZhaG ...

  8. 用UIScrollView产生视差效果

    用UIScrollView产生视差效果 效果: 高级效果: 源码: MoreInfoView.h  +  MoreInfoView.m // // MoreInfoView.h // YXCell / ...

  9. (1)基于tcp协议的编程模型 (2)tcp协议和udp协议的比较 (3)基于udp协议的编程模型 (4)反射机制

    1.基于tcp协议的编程模型(重中之重)1.1 编程模型服务器: (1)创建ServerSocket类型的对象,并提供端口号: (2)等待客户端的连接请求,调用accept()方法: (3)使用输入输 ...

  10. 构造个人轻量级XSS平台获取管理员cookie并登录

    一.前言 本平台是个人轻量级XSS测试平台,仅作为练习参考. 二.实验环境 服务器操作系统:Centos 7 Web容器:Apache 三.平台搭建过程 安装Apache 安装PHP 安装Git工具 ...