示例代码:

<!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. 报表在vista和win7下无法浏览应用的解决办法

     对于vista和win7系统,报表工具有着良好的兼容性,无论是设计器还是实际应用.有些客户在安装报表设计报表的时候没有遇到问题,但是在这两种系统下会发现无法启动应用,或者打开设计器自带的ie浏览 ...

  2. redis 数据淘汰策略与配置

    redis 数据淘汰策略 volatile-lru:从已设置过期的数据集中挑选最近最少使用的淘汰volatile-ttr:从已设置过期的数据集中挑选将要过期的数据淘汰volatile-random:从 ...

  3. sql in interview for a job

    1.mysql下建表及插入数据 /* Navicat MySQL Data Transfer Source Server : mysql Source Server Version : 50640 S ...

  4. apache ftp server的外网访问问题

    apache ftp server的外网访问简单配置点如下:

  5. 禅道Bug管理工具环境搭建

    下载地址:http://sourceforge.net/projects/zentao/files/8.2/ZenTaoPMS.8.2.stable.exe/download 1.解压ZenTaoPM ...

  6. shell_advanced

    1.輸入輸出,重定向,管道 2.<(cmd):>(cmd) 3.>:<:>>:<<:>>>:<<< 4.文本处理_1 ...

  7. Debian 版本历史

    Production Releases Version Code name Release date End of life date 8.0 jessie April 25th 2015   7.0 ...

  8. armel和armhf区别

    出于低功耗.封装限制等种种原因,之前的一些ARM架构处理器因为内部资源宝贵,加入浮点运算单元是十分奢侈的,因为需要额外的软件实现.之前的ARM处理器架构是什么样的?(http://www.cnblog ...

  9. [SQLServer] 内存占用查看

    SELECT (physical_memory_in_use_kb/1024) AS Memory_usedby_Sqlserver_MB, (locked_page_allocations_kb/1 ...

  10. 能力成熟度模型（CMM）

    能力等级 特点 关键过程 第一级 基本级 软件过程是混乱无序的,对过程几乎没有定义,成功依靠的是个人的才能和经验,管理方式属于反应式   第二级 重复级 建立了基本的项目管理来跟踪进度.费用和功能特征 ...