blueimg gallery
github地址：https://github.com/blueimp/Gallery/blob/master/README.md
使用前提，引用css和js
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<script src="js/blueimp-gallery.min.js"></script>
需求：列表类型数据，每条数据对应4副图片，希望点击“查看活动按钮”后，全屏预览图片
html段A
<div class="lightGallery" >
<a href="http://www.luminormedia.com/WX/Public/HouesChuzhu/14685002683951903271.jpg" title="照片-1" data-gallery="example-9">点击查看活动图片</a>
<a href="http://www.luminormedia.com/WX/Public/HouesChuzhu/14685002683951903271.jpg" title="照片-2" data-gallery="example-9" data-title=""></a>
</div>
html段B
<div ></ol>
</div>
html段B所放置的位置，决定了图片预览的遮罩层所覆盖的范围
覆盖的范围 = html段B的父级所占用的范围。
也可以用js控制遮罩层覆盖范围：
$(function () {
// Initialize the Gallery as video carousel:
blueimp.Gallery([
{
title: 'Sintel',
href: 'https://archive.org/download/Sintel/sintel-2048-surround_512kb.mp4',
type: 'video/mp4',
poster: 'https://i.imgur.com/MUSw4Zu.jpg'
}
], {
container: 'id class 标签', //遮罩范围
carousel: true
})
})