lightgallery灯光画廊插件用法

美奇开发工作室

于 2021-04-25 12:24:31 发布

阅读量2.4k

点赞数 3

分类专栏： # Javascript

本文链接：https://blog.csdn.net/qq15577969/article/details/116122963

版权

Javascript 专栏收录该内容

52 篇文章

订阅专栏

效果图：

下载地址：

https://download.csdn.net/download/qq15577969/17808456

示例代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>图片灯光画廊</title>
		<link rel="stylesheet" type="text/css" href="css/lightgallery.min.css">
	</head>

	<body>
		<ul id="imgs" class="list-unstyled row">
			<li  data-src="img/game_1.png" data-sub-html="<p>游戏截图1</p>">
				<img class="img-responsive" src="img/game_1.png">
			</li>
			<li  data-src="img/game_2.png" data-sub-html="<p>游戏截图2</p>">
				<img class="img-responsive" src="img/game_2.png">
			</li>
			<li  data-src="img/game_3.png" data-sub-html="<p>游戏截图3</p>">
				<img class="img-responsive" src="img/game_3.png">
			</li>
			<li  data-src="img/game_4.png" data-sub-html="<p>游戏截图4</p>">
				<img class="img-responsive" src="img/game_4.png">
			</li>
			<li  data-src="img/game_5.png" data-sub-html="<p>游戏截图5</p>">
				<img class="img-responsive" src="img/game_5.png">
			</li>
		</ul>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lightgallery-all.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('#imgs').lightGallery();
			});
		</script>
	</body>

</html>

插件介绍：

lightgallery.js是一款纯JavaScript轻量级响应式lightbox插件，该Lightbox插件支持图片，视频，iframe等多种媒体，支持全屏，导航，缩放，下载等功能，还支持多种动画过渡效果，lightgallery.js的特点：

完全响应式设计。
内置插件的模块化体系结构。
支持移动触摸设备。
桌面设备中可以通过鼠标拖拽来切换。
鼠标双击可以查看原尺寸的大图。
缩略图带动画特效。
支持各种视频。
支持20多种硬件加速的CSS3过渡动画。
支持动态加载模式。
支持全屏模式。
支持图片的缩放。
支持HTML5 history API。
响应式图片。
支持HTML iframe。
同一个页面支持多个实例。
智能加载图片及代码优化。
桌面设备支持键盘导航。
支持字体图标。

核心配置参数：

参数	类型	默认值	描述
mode	string	'lg-slide'	图片过渡的动画类型。可用的动画有：'lg-slide'、'lg-fade'、'lg-zoom-in'、'lg-zoom-in-big'、'lg-zoom-out'、'lg-zoom-out-big'、'lg-zoom-out-in'、'lg-zoom-in-out'、'lg-soft-zoom'、'lg-scale-up'、'lg-slide-circular'、'lg-slide-circular-vertical'、'lg-slide-vertical'、'lg-slide-vertical-growth'、'lg-slide-skew-only'、'lg-slide-skew-only-rev'、'lg-slide-skew-only-y'、'lg-slide-skew-only-y-rev'、'lg-slide-skew'、'lg-slide-skew-rev'、'lg-slide-skew-cross'、'lg-slide-skew-cross-rev'、'lg-slide-skew-ver'、'lg-slide-skew-ver-rev'、'lg-slide-skew-ver-cross'、'lg-slide-skew-ver-cross-rev'、'lg-lollipop'、'lg-lollipop-rev'、'lg-rotate'、'lg-rotate-rev'、'lg-tube'
cssEasing	string	'ease'	easing过渡动画类型。
speed	number	600	过渡动画的持续时间。单位毫秒。
height	string	'100%'	图片画廊的高度。
width	string	'100%'	图片画廊的宽度。
addClass	string	''	为画廊添加自定义的class。
startClass	string	'lg-start-zoom'	画廊的开始动画类型。
backdropDuration	number	150	Lightgallery backdrop transtion duration
hideBarsDelay	number	6000	隐藏图片画廊控制按钮的延迟时间，单位毫秒。
useLeft	boolean	false	强制lightgallery使用left属性来代替transform。
closable	boolean	true	允许用户点击暗处关闭图片画廊。
loop	boolean	true	是否循环播放。
escKey	boolean	true	是否允许通过"Esc"键来关闭图片画廊。
keyPress	boolean	true	是否允许键盘导航。
controls	boolean	true	是否显示前后导航按钮。
slideEndAnimatoin	bolean	true	是否允许slideEnd 动画。
hideControlOnEnd	boolean	false	如果设置为false，第一幅和最后一幅图片不显示前后导航按钮。
getCaptionFromTitleOrAlt	boolean	true	从图片的alt或title标签获取图片描述信息。
appendSubHtmlTo	string	'.lg-sub-html'	指定添加sub-html：'.lg-sub-html' 或 '.lg-item'。
subHtmlSelectorRelative	boolean	false	如果使用"data-sub-html"选择器作为当前项目的源，设置为true。
preload	number	1	预加载slider的数量。
showAfterLoad	boolean	true	是否在完全加载后显示内容。
selector	string	''	自定义选择器来替代子元素。
selectWithin	string	''	By default selectror element is taken from only inside the gallery element. Instead of that you can tell lightgallery to select element within a specific
nextHtml	string	''	Next按钮的html标记。
prevHtml	string	''	Prev按钮的html标记。
index	number	0	设置被立刻加载的图片/视频的索引。
iframeMaxWidth	string	'100%'	设置iframe的最大宽度。
download	boolean	true	是否使用下载按钮。
counter	boolean	true	是否显示图片的总数和当前图片的索引。
appendCounterTo	string	'.lg-toolbar'	指定被添加的计数器。
swipeThreshold	number	50	触摸滑动的阈值。
enableDrag	boolean	true	在桌面设备是否允许鼠标拖动。
enableTouch	boolean	true	是否允许移动触摸。
dynamic	boolean	false	通过编程的方式动态调用插件。
dynamicEl	array	[]	代表画廊元素的数组。