viewer，一款好用的圖片預覽、查看插件

在項目中，需要點擊查看圖片，本次我用了 viewer 這款插件

• 本次用到的 css，js 文件已經上傳至百度網盤：

鏈接：https://pan.baidu.com/s/1N5cvkk0mHV-8gDk240oByA 
提取碼：l6kw

• 1、引入 css 和 js 文件

<!-- 圖片查看器 css -->
<link rel="stylesheet" href="<%=path%>/js/viewer/viewer.min.css" />
<!-- 圖片查看器 js -->
<script src="<%=path %>/js/viewer/viewer.min.js"></script>

• 2、將需要展示的圖片放入 HTML 中，併爲每一張圖片綁定點擊事件

<div class="img_content" style="padding: 10px 10px;">
    <c:forEach items="${photo}" var="item" varStatus="indexStatus">
        <img src="<%=path%>/upload/${item.photo}" title="盤點照片" style="width: 100px;height: 100px" index="${indexStatus.index}" onclick="showImg(this)">
    </c:forEach>
</div>

• 3、在 HTML 中建立一個圖片查看器的實例，此時是隱藏的：display: none; ${photo} 爲你需要查看圖片的 List
  數組

<!-- 查看圖片 -->
<ul id="viewer" style="display: none;">
    <c:forEach items="${photo}" var="item" varStatus="indexStatus">
        <li index="${indexStatus.index}"><img class="viewer-img" src="<%=path%>/upload${item.photo}"></li>
    </c:forEach>
</ul>

如果是多個圖片組的話，我們在建立圖片查看器實例的時候，不需要去渲染圖片，只需要如下操作：

<!-- 查看圖片 -->
<ul id="viewer" style="display: none">
    <li index="0"><img class="viewer-img" src=""></li>
</ul>

• 4、在頁面加載時初始化圖片查看插件

$(function () {
    // 初始化圖片查看插件
    $('#viewer').viewer({
        title: false,
    });
});

• 5、圖片的點擊事件

// 查看圖片
function showImg(obj) {
    $('#viewer').children('li').eq($(obj).attr('index')).children('img').click();
}

• 6、如果頁面有多個圖片組，我們在點擊的時候，需要更換圖片組，則圖片的點擊事件爲：

// 查看圖片
function showImg(obj) {
    var index = $(obj).data("index");
    var url = $(obj).attr("src");
    var str = '';
    var urlArr = url.split(",");
    for(var i = 0,len = urlArr.length;i < len;i++){
        str += '<li index="'+i+'"><img class="viewer-img" src="<%=path%>/upload'+urlArr[i]+'"></li>';
    }
    // 替換圖片查看器實例裏面的內容
    $('#viewer').html(str);
    // 執行更新
    $('#viewer').viewer('update');
    $('#viewer').children('li').eq(index).children('img').click();
}

• 7、查看效果
  

如您在閱讀中發現不足，歡迎留言！！！