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

最新推荐文章于 2021-06-21 01:18:18 发布

weixin_30279671

最新推荐文章于 2021-06-21 01:18:18 发布

阅读量288

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangzhaobo/p/8961696.html

版权

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

转载于:https://www.cnblogs.com/wangzhaobo/p/8961696.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30279671

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
强大的图片展示插件,JQuery图片预览展示插件

只需要引入JQuery.js , viewer.css 和viewer.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="h...
复制链接

扫一扫