示例代码:

<!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. 直接拿去用！每个App都会用到的LoadingLayout

    前言 项目里都会遇到几种页面,分别为加载中.无网络.无数据.出错四种情况,经常要使用,所以封成库引用了,方便使用,顺便分享出来.先看一下效果: 原理比较简单,继承FrameLayout,在xml渲染完 ...

  2. MySql 缓存查询原理与缓存监控 和 索引监控

    MySql缓存查询原理与缓存监控 And 索引监控 by:授客 QQ:1033553122 查询缓存 1.查询缓存操作原理 mysql执行查询语句之前,把查询语句同查询缓存中的语句进行比较,且是按字节 ...

  3. android--Git上克隆项目遇到的坑

    直接上图,首先你得有你得GitHub项目地址,如下: 然后打开android studio,选择新建项目时从Git上克隆: 点击clone等待完成,新窗口打开. 打开之后可能.或许.大概.也许会出现下 ...

  4. ExtJs 4.1.1 文件结构解析

  5. npm与gulp的使用

    这边将工作中使用的npm以及gulp的一些方法做了整理,方便以后查阅,至少不用去麻烦度娘了~ A.npm的使用: 1.在你所需要的文件夹里面初始化npm-->  npm init -y    - ...

  6. win10下vs2015配置Opencv3.1.0过程详解(转)

    下载安装Opencv3.1.0 下载Opencv3.1.0,进入官网,点击opencv for windows即可下载.  点击运行下载好的文件.实际上,opencv的安装程序就是解压缩文件,个人因为 ...

  7. Oracle 查询状态 自检

    Tips:fnd_lobs表会保存我们上传的一些文件和Form界面“文件“-“导出”的文件.如果不定期清理了话,会出现文件上传失败,或者是导出按钮可以点击,但是点击完以后没有任何反应.这个时候我们应该 ...

  8. 如何生成.mobileprovision文件

    如何生成.mobileprovision文件 本人视频教程系列 **.mobileprovision文件的生成的第一步就需要你提供一个用于开发的App ID 1. 创建App ID 创建一个bundl ...

  9. apache的AllowOverride以及Options使用详解

    通常利用Apache的rewrite模块对 URL 进行重写的时候, rewrite规则会写在 .htaccess 文件里.但要使 apache 能够正常的读取.htaccess 文件的内容,就必须对 ...

  10. Windows 7 添加快速启动栏

    1.右击任务栏空白处,选择 “工具栏” ,单击 “新建工具栏” 2.输入 以下路径: %userprofile%\AppData\Roaming\Microsoft\Internet Explorer ...