pc端实现点击查看大图

首先引入css文件：

<link href="/resource/css/lightbox2/lightbox.css"  rel="stylesheet" type="text/css">

 然后引入js文件：

<%--lightbox2--%>
<script src="/resource/js/lightbox2/lightbox.js" type="text/javascript"></script>
<script>

    lightbox.option({
//    alwaysShowNavOnTouchDevices:false,//默认false,如果为true，观看图像集时，将永远是支持触摸设备可见。
        albumLabel: "图像 %1 / %2 ",//查看图像时设置的下方字幕显示的文本。默认的文本显示当前图像数目和在该组的图像的总数。
        disableScrolling: false,//默认为false，如果为true，激活展示大图时禁止浏览器滚动效果。
//    fadeDuration:1000,//设置载入登出淡入效果时间
        fitImagesInViewport: true,//默认true,调整使其适合整齐地在它的内部
//    imageFadeDuration:1000,//设置图片的淡出淡入效果时间
//    maxWidth:"",//设置最大最小
//    maxHeight:"",//设置最大最小
//    positionFromTop:80,//设置距离顶部距离
        resizeDuration: 200,//当不同大小的图像，在毫秒之间转换。
        wrapAround: false,//如果为true,当用户操作到达最后一张图片后，循环播放
//    showImageNumberLabel:true,//如果为false，表示当前图像编号和图像的设置总数（如“影像的4个2”）文本将被隐藏。
    })
</script>

引入完成之后再把图片信息写进去，进行判断大图小图。

<script type="text/html" id="imageDemo">
    <a href="{{ d.img_url }}" data-lightbox="roadtrip" data-field="img_url" class="lightbox_style doctor_image">
        <img src="{{ d.img_url }}"/>
    </a>
</script>

 下面是使用layui，给里面塞数据

 , {field: 'img_url', title: '头像',unresize:true, align: "center", templet: '#imageDemo', width: 200}