使用lightbox.js制作图片弹出层图像展示效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

Lightbox 是一个基于 JavaScript 的图片预览库，其主要功能是允许用户在网页上进行图像缩略图的点击展开和关闭操作。 该库支持多种浏览器并且具有响应式的布局设计，适用于任何屏幕尺寸和设备类型。Lightbox 可以提高用户体验并增加用户与网站之间的互动性。

如何使用Lightbox

步骤1：引入插件文件

在结束/body 标签之前,在页面的底部加上Javascript

纯文本
点击复制
Open code in new window
EnlighterJS 3 Syntax Highlighter
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script>
Expand
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

步骤2：使用HTML初始化

一张图像。 加一个data-lightbox 属性任何图像链接,以启用lightbox.对于属性的值,请为每个图像使用唯一的名称。例如:

纯文本
点击复制
Open code in new window
EnlighterJS 3 Syntax Highlighter
<a href="images/1.jpg" data-lightbox="example-set" data-title="标题1">
<div class="img">
<img src="images/1.jpg" /></div>
<h4>
标题1</h4>
</a>
<a href="images/1.jpg" data-lightbox="example-set" data-title="标题1"> <div class="img"> <img src="images/1.jpg" /></div> <h4> 标题1</h4> </a>
Expand
<a href="images/1.jpg" data-lightbox="example-set" data-title="标题1">
    <div class="img">
        <img src="images/1.jpg" /></div>
    <h4>
        标题1</h4>
</a>