viewer圖片查看器插件點擊非圖片區關閉與動態加載

 

 直接看圖

原版連接下載：（這個點擊非圖片區域是不會關閉的）

https://www.dowebok.com/demo/192/

我的修改版：（修改了一點 js文件和樣式也修改了一點 用的時候記得替換）實現了js動態加載圖片預覽和底部導航欄切換和點擊非圖片區域關閉等

https://files-cdn.cnblogs.com/files/maoye520/viewer%E5%9B%BE%E7%89%87%E6%9F%A5%E7%9C%8B%E6%8F%92%E4%BB%B6%E4%BF%AE%E6%94%B9%E7%89%88.zip

關於js動態使用ajax加載圖片無法更新預覽的問題：

<ul id="dowebok">
    <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="圖片1"></li>
    <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="圖片2"></li>
    <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="圖片3"></li>
    <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="圖片4"></li>
    <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="圖片5"></li>
    <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="圖片6"></li>
</ul>

 

加入下面的方法：

$(function() {
    $('#dowebok').viewer({
        url: 'data-original',
    });
});

 

ps：不懂的直接下載我的修改版下來自己研究。。。如果你還有其他更好的方法推薦，歡迎騷擾~~~