blueimp,预览遮罩范围控制

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 id="blueimp-gallery" class="blueimp-gallery">
　　<div class="slides"></div>
　　<h3 class="title"></h3>
　　<a class="prev">‹</a>
　　<a class="next">›</a>
　　<a class="close">×</a>
　　<a class="play-pause"></a>
　　<ol class="indicator"></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
})
})