都需要引入jq库
// lightGallery (插件)
//调用方式
<script type="text/javascript" src="//dfs.yun300.cn/group1/M00/1C/94/rBQBHF8H0iWEf5oBAAAAAK1aPmU3811.js"></script>
<link rel="stylesheet" type="text/css" href="http://dfs.yun300.cn/group1/M00/1A/5A/rBQBHV8zX2iET_hzAAAAAKlaNfA431.css">
//主题结构
<div class="n_box" id="lightgallery">
#foreach($info in $!listList.data.pagination.list)
<div class="n_item" data-src="$img.getImgUrl($info.coverUrl)">
<div class="img_box">
<img class="img_pic" src="$img.getImgUrl($info.coverUrl)" alt="$info.title">
</div>
</div>
#end
</div>
//使用
<script type="text/javascript">
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
</script>
//fancybox (插件)
//调用方式
<link rel="stylesheet" href="//dfs.yun300.cn/group1/M00/1A/0E/rBQBHV7wX06EUZcpAAAAAMCFpFo274.css" />
<script type="text/javascript" src="//dfs.yun300.cn/group1/M00/1A/0E/rBQBHV7wX1-EULjiAAAAAP8BVn48063.js"></script>
//主题结构
<a href="$img.getImgUrl($info.coverUrl)" class="fa_box">
<img class="img_pic" src="$img.getImgUrl($info.coverUrl)" alt="$info.title">
</a>
//使用
<script type="text/javascript">
$('.fa_box').fancybox({autoScale:true,showCloseButton:true})
</script>