jQuery灯箱插件lightBox使用方法

原文链接：https://blog.csdn.net/ououou123456789/article/details/6015122

https://jingyan.baidu.com/article/9c69d48f992b1b13c9024e3d.html

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。

　　　　$(function() {
 　　　　　　　　$('#gallery a').lightBox({fixedNavigation:true});
　　　　});

使用方法：

1、在百度搜索中搜索关键词" Lightbox JS",

2、访问 Lightbox官方网站，Download the latest version（下载 Lightbox最新版本），如下图所示。

  

 

3、在页面头部包含 lightbox.js 文件并加载 lightbox.css 样式表文件

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

4、

<a href="image-1.jpg" data-lightbox="image-1" data-title="文字说明">Image #1</a>
 <!-- 如果是一组相关的图片，可以对该组图片设置 data-lightbox 属性为相同的值。-->
<a href="img/image-2.jpg" data-lightbox="group">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="group">Image #3</a> 
<a href="img/image-4.jpg" data-lightbox="group">Image #4</a> 

以上内容设置好即可，会自动调用 Lightbox。

5、使用说明，如下图所示。

参数说明

 

注意：目前除了修改源码，不能在调用的时候修改参数（因为是自动调用的，并且参数没有暴露到外部），期待以后的更新能完善该功能。

• 使用lightbox.min.js，确信JQuery库已经引入并被加载
• 如果使用的是lightbox-plus-jquery.min.js，则可以不引入JQuery库