强大的图片展示插件,JQuery图片预览展示插件

Posted 王召波

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了强大的图片展示插件,JQuery图片预览展示插件相关的知识，希望对你有一定的参考价值。

只需要引入JQuery.js , viewer.css 和 viewer.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <link rel="stylesheet" href="./viewer.css">
    <script src="./viewer.js"></script>
</head>
<body>
    <ul id="viewer">
    <li><img data-original="images/tibet-1.jpg" src="images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
    <li><img data-original="images/tibet-2.jpg" src="images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
    </ul>
</body>
<script>
    $(\'#viewer\').viewer();
</script>
</html>

demo实例化的时候用的id ,其实也可以用class, 用class就是当图片有分类的时候,用class实例化,预览也是分组的,如下图:

 

插件下载地址:https://github.com/fengyuanchen/viewer

以上是关于强大的图片展示插件,JQuery图片预览展示插件的主要内容，如果未能解决你的问题，请参考以下文章

JQuery插件：图片上传本地预览插件，改进案例一则。

viewerjs图片预览插件ajax动态加载图片不出现-已解决

Viewer.js 图片预览插件使用

jQuery功能强大的图片查看器插件

对于图片缩放预览查看JS插件

一款强大的前端vue实用图片放大预览插件（推荐收藏）