只需要引入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. 请在微信客户端打开链接 html

    1 前言 有时候,需要链接只能在微信上打开,如果不是,则提示请在微信客户端打开链接的字眼的网页,网页代码如下:(这个是网页应用授权时,非微信上打开,就会出现,然后把它单独拿出来了) 2 代码 < ...

  2. python numpy中数组.min()

    import numpy as np a = np.array([[1,5,3],[4,2,6]]) print(a.min()) #无参,所有中的最小值 print(a.min(0)) # axis ...

  3. v-html里面添加样式

    项目中,使用V-html渲染的页面,要添加样式,改如何做 解决方案1:在updated生命周期函数中,js动态配置样式,代码如下: updated() { $('.msgHtmlBox').find( ...

  4. react.css

    /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier ...

  5. swift 实践- 01 -- UItableView的简单使用

    import UIKit class ViewController: UIViewController ,UITableViewDelegate,UITableViewDataSource{ over ...

  6. 移动端点击出现阴影 css解决方案

    a,img,button,input,textarea,div{-webkit-tap-highlight-color:rgba(255,255,255,0);}

  7. 【Linux】基本命令操作

    一.用户操作 1.新增用户 useradd -u 1101 -g zte -d /home/xhs -m xhs --其中,1101,为用户ID,尽量使用500以上的 zte,为用户组 /home/x ...

  8. day12 函数的嵌套调用 闭包函数，函数对象

    函数嵌套: 函数嵌套: 嵌套指的是,一个物体包含另一个物体,函数嵌套就是一个函数包含另一个函数 按照函数的两个阶段 嵌套调用 指的是在函数的执行过程中调用了另一个函数,其好处可以简化外层大函数的代码, ...

  9. Solver Of Caffe

    本文旨在解决如何编写solver文件. Solver的流程: 1.     设计好需要优化的对象,以及用于学习的训练网络和用于评估的测试网络.(通过调用另外一个配置文件prototxt来进行) 2.  ...

  10. bzoj3991 lca+dfs序应用+set综合应用

    /* 给定一棵树,树上会出现宝物,也会有宝物消失 规定如果要收集树上所有宝物,就要选择一个点开始,到每个宝物点都跑一次,然后再回到那个点 现在给定m次修改,每次修改后树上就有一个宝物消失,或者一个宝物 ...