图片弹窗放大

都需要引入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>