只需要引入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="data:images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>

    <li><img data-original="images/tibet-2.jpg" src="data: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图片预览展示插件的更多相关文章

  1. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  2. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  3. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  4. 9种CSS3炫酷图片展开预览展示动画特效

    详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...

  5. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  6. vue 项目文件流数据格式转blob图片预览展示

    为了图片安全性,有时候上传图片后后台不会直接返回图片地址,会返回文件流的数据格式,这种格式需要处理下才能展示在页面上   // 使用axios请求上传接口 axios({ method: 'get', ...

  7. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  8. 图片上传前的预览（PHP）

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

  9. 基于Jcrop的图片上传裁剪加预览

    最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. PHP一维数组转二维数组正则表达式

    2017年11月20日17:17:08 array(1 => '哈哈')  变成  array('id' => 1, 'name' => '哈哈') 查找目标:  (\d)\s=&g ...

  2. python序列(列表，元组，字典)的增删改查

    列表 操作 列表 方法 示例 增加 list.append(obj) 增加元素到末尾 eg. >>> list1=['hello','world','how','are','you' ...

  3. MySQL将查询出来的一组数据拼装成一个字符串

    1 前言 由于项目中有一个需求,需要把当日当周的排行榜数据归档,以便后期查询和发放奖励.然而发现,mysql的变量只能存一个变量值,然后如果要储存一条记录,可以使用CONCAT_WS,如果要储存多条记 ...

  4. Django 配置（一）开启服务

    注:这里使用的是命令行创建,当然也可以用 pycharm 自带的 django 项目创建更加简便. 安装django pip install django 创建项目 django-admin star ...

  5. Codeforces 1093E Intersection of Permutations [CDQ分治]

    洛谷 Codeforces 思路 一开始想到莫队+bitset,发现要T. 再想到分块+bitset,脑子一抽竟然直接开始写了,当然也T了. 最后发现这就是个裸的CDQ分治-- 发现\(a\)不变,可 ...

  6. STM32L476应用开发之二：模拟量数据采集

    采集模拟量数据在一台一起中是必不可少的功能.在本次实验中我们要采集的模拟量值主要包括氧气传感器的输出以及压力变送器的输出. 1硬件设计 我们需要采集数据对精度有一定的要求,而STM32L476自带AD ...

  7. 第十七单元 Samba服务

    Samba的功能 Samba的安装 Samba服务的启动.停止.重启 Samba服务的配置 Samba服务的主配置文件 samba服务器配置实例 Samba客户端设置 windows客户端 Linux ...

  8. LeetCode（117）：填充同一层的兄弟节点 II

    Medium! 题目描述: 给定一个二叉树 struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *n ...

  9. C#概念总结（二）

    1.C#的方法:<access Specifier>  <Return Type>< Method Name>(Parmeter list){     method ...

  10. Java 获取图片的大小、宽、高

    参考:https://www.cnblogs.com/hongten/archive/2012/11/26/hongten_java_ImageReader_BufferedImage.html im ...