官网 https://www.lightgalleryjs.com/

引入插件

// 包含所有插件的css
<link rel="stylesheet" href="__SKIN__/plugins/lightgallery/css/lightgallery-bundle.css" />


//html结构
<div id="lightgallery" >					
   <div data-src="原图地址"   data-sub-html="标题" ><img src="图片地址"></div>
   <div data-src="原图地址"   data-sub-html="标题" ><img src="图片地址"></div>					
</div>



//核心js
<script  src="__SKIN__/plugins/lightgallery/lightgallery.min.js"></script>

//其它插件js
<script  src="__SKIN__/plugins/lightgallery/plugins/thumbnail/lg-thumbnail.min.js"></script>
<script  src="__SKIN__/plugins/lightgallery/plugins/zoom/lg-zoom.min.js"></script>
<script  src="__SKIN__/plugins/lightgallery/plugins/fullscreen/lg-fullscreen.min.js"></script>
<script  src="__SKIN__/plugins/lightgallery/plugins/rotate/lg-rotate.min.js"></script>
<script  src="__SKIN__/plugins/lightgallery/plugins/vimeoThumbnail/lg-vimeo-thumbnail.min.js"></script>

调用

lightGallery(document.getElementById('lightgallery'), {
	speed: 500, //切换速度
	mode: '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
	//引入插件
	plugins: [lgThumbnail,lgZoom,lgFullscreen,lgRotate,lgVimeoThumbnail],
	allowMediaOverlap:true,  //切换拇指,如果为false  toggleThumb 不生效
	toggleThumb: true, //缩略图显隐
	download: false, //下载按钮
	//手机端设置
	mobileSettings: {
	  controls: false, //左右箭头
	  showCloseIcon: true, //关闭按钮
	  download: true, //下载按钮
	  rotate: false, //图片旋转、翻转
	}
});

我精简白色的风格

lightgallery.zip