示例代码:

<!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. Android屏幕适配工具

    这里需要用到一个jar包,下载拿到这个jar包后直接双击就可以生成市场大部分主流屏幕尺寸了.然后只要把生成好的xml尺寸文件拷贝到相应的value文件中即可.很方便,以后再也不用担心适配繁琐的问题了. ...

  2. ubuntu密码正确，却不能登录图形界面

    传统的方法是修改.Xauthority文件权限,不过我试了没有用. 后来发现我的问题是因为安装了NVIDIA cuda驱动而导致的. 所以先卸载nvidia驱动,再更新,就可以正常进入了. 命令: s ...

  3. Azure 镜像市场虚拟机映像制作指南

    本指南为 Azure 镜像市场(以下简称 Azure 镜像市场)独立软件供应商介绍制作虚拟机映像并上传到Azure的主要过程. 制作虚拟机映像有两种方式.一种是直接在Azure上申请相应的操作系统虚拟 ...

  4. Linux 下 python如何配置virtualenv

    .安装virtualenv pip3 install virtualenv pip install -i https://pypi.tuna.tsinghua.edu.cn/simple virtua ...

  5. 用CAShapeLayer写股市K线图动画效果

    用CAShapeLayer写股市K线图动画效果 说明 入市有风险,炒股需谨慎.(因项目需求,本人提供了写这种效果的源码) 效果 源码 // // ViewController.m // Path // ...

  6. 清除 Exchange 2013/2016/2019 日志和ETL文件

    Exchange Server  的2个日志目录会增长的很快,需要定时清理,不然C盘的空间很快就会吃光,以下这个powershell脚本就是用于清理目录下面的日志的,已在生产环境中测试过,没问题: S ...

  7. 用HashSet存储自定义对象

      案例 package cn.itcast_02; import java.util.HashSet; /* * 需求:存储自定义对象,并保证元素的唯一性 * 要求:如果两个对象的成员变量值都相同, ...

  8. C# HttpWebRequest 笔记

    目录: 1,HttpWebRequest 实例化 2,GetResponse 获取请求结果 3,获取结果 4,获取流信息 HttpWebRequest 是一个Http 请求类,继承于 WebReque ...

  9. Linux常用命令笔记总结(待补充)

    问题实际场景:遇到告警磁盘利用率不足,检查根目录下各文件大小 Linux查看磁盘利用率 df –h 查找磁盘占用情况 find / -size +100M 从根目录往下找大于100M大小的文件 du ...

  10. JavaScript基础进阶之数组方法总结

    数组常用方法总结:  下面我只总结了es3中常用的数组方法,一共有11个.es5中新增的9个数组方法,后续再单独总结. 1个连接数组的方法:concat() 2个数组转换为字符串的方法:join(). ...