只需要引入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. STM32F1-GPIO的操作

    GPIO 即通用输入输出口.凡事都要熟悉,熟能生巧.一定要掌握MDK软件的工程操作方法. 对于GPIO的操作. Project里面要有以下几个文件夹(开发之前需要包含相应的库文件,这里默认已经包含) ...

  2. Tomcat 部署项目的三种方法（转）

    转自:https://www.cnblogs.com/ysocean/p/6893446.html#_label0 1.下载 Tomcat 服务器 ①.官网下载地址:http://tomcat.apa ...

  3. Swift 学习- 05 -- 集合类型

    // 集合类型 // swift 提供 Arrays , Sets 和 Dictionaries 三种基本的集合类型用来存储数据 , 数组(Arrays) 是有序数据的集, 集合(Sets)是无序无重 ...

  4. Java中数据类型默认转换和强制类型转换

    默认转换: a:由低到高一次为:(byte   short    char  )---int ---long ---float --- double b:注意:byte   short    char ...

  5. struts2 过滤器和拦截器的区别和使用

    java web 过滤器和拦截器的区别和使用  1.1 什么是拦截器:      拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然 ...

  6. hibernate入门程序

    快速入门       1. 下载Hibernate框架的开发包       2. 编写数据库和表结构 Create database hibernate_day01; Use hibernate_da ...

  7. spring springMvc spring-boot spring-cloud分别是什么

    本文来源于:克己习礼成仁   的<spring springMvc spring-boot spring-cloud分别是什么> 什么是spring 关于spring的定义无论是从官方还是 ...

  8. Confluence 6 管理协同编辑 - 最大编辑者的限制

    我们限制为最多 12 个用户可以同时对一个页面进行编辑.这个意味着当一个页面已经有 12 个用户正在编辑了,13 个用户是不能进入编辑界面的,直到 12 个用户中有一个用户已经离开了. 系统管理员可以 ...

  9. Confluence 6 配置 简易信息聚合（RSS）

    一个 Confluence 的管理员可以配置下面的 RSS 特性: Confluence 针对 RSS 聚合返回的最大项目数量. Confluence 针对 RSS 聚合允许的最大时间周期. 上面两个 ...

  10. 《剑指offer》 树的子结构

    本题来自<剑指offer> 树的子结构 题目: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 思路: 分两步走: 第一步:判断根节点,两个根节 ...