只需要引入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. UVA 1395 MST

    给你一个图, 求一个生成树, 边权Max – Min 要最小,输出最小值, 不能构成生成树的 输出 -1: 思路: Keuksal 算法, 先排序边, 然后枚举 第一条边, 往后加入边, 直到有 n- ...

  2. Python-爬虫-租房Ziroom

    目标站点需求分析 涉及的库 import requestsimport timeimport pymongofrom lxml import etreefrom requests.exceptions ...

  3. python-包及日志模块使用

    一.包 1.包就是一个保护有__init__.py文件的文件夹,包的本质就是一种模块,即包是用来导入使用的,包内部包含的文件也都是用来被导入使用的.包是为了更好组织好模块,就是一个文件夹. 注:在py ...

  4. oracle存储大文本clob、blob

    oracle存储大文本clob.blob 1 package cn.itcast.web.oracle.util; 2 3 import java.sql.Connection; 4 import j ...

  5. LuoGu P2863 [USACO06JAN]牛的舞会The Cow Prom

    题目传送门 这个题还是个缩点的板子题...... 答案就是size大于1的强连通分量的个数 加一个size来统计就好了 #include <iostream> #include <c ...

  6. Confluence 6 在编辑器中控制参数的显示

    你可以决定宏参数在 Confluence 编辑器中如何进行显示的. 在默认的情况下,在宏占位符下尽可能显示能显示的所有参数: 你可以控制这里显示的参数数量,通过这种控制你可能尽量的为编辑者提供有效的信 ...

  7. Socket网络编程（二）

    udp协议发送消息案例 1.创建UdpServer(udp服务器端) package com.cppdy.udp; import java.net.DatagramPacket; import jav ...

  8. Java并发编程基础-ReentrantLock的机制

    同步锁: 我们知道,锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源,在Lock接口出现之前,Java应用程序只能依靠synchronized关键字来实现同步锁 ...

  9. Saruman's Army(POJ3069)

    Description Saruman the White must lead his army along a straight path from Isengard to Helm’s Deep. ...

  10. php回调函数的概念及实例

    php提供了两个内置函数call_user_func()和call_user_func_array()提供对回调函数的支持.这两个函数的区别是call_user_func_array是以数组的形式接收 ...