只需要引入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. configure.*和Makefile.*之间的关系

    现在很多项目都在使用GUI编译器,Kdevelop\Eclipse等等,诚然它给我们提供了极大地便利,但我们仍需要简单了解编译的过程.本文旨在简单叙述由源码(*.cpp & *.h)经过编译得 ...

  2. ifconfig和ping

    命令: ifconfig 对应英文: configure a network interface 作用: 查看 / 配置计算机当前的网卡配置信息 安装: sudo apt install net-to ...

  3. HTTP连接池

    <context:property-placeholder location="classpath:conf/framework/httpclient.properties" ...

  4. WebSocket服务端和客户端使用

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Net;usi ...

  5. Oracle SQL高级编程——分析函数（窗口函数）全面讲解

    Oracle SQL高级编程--分析函数(窗口函数)全面讲解 注:本文来源于:<Oracle SQL高级编程--分析函数(窗口函数)全面讲解> 概述 分析函数是以一定的方法在一个与当前行相 ...

  6. iframe与主框架跨域相互访问方法

    iframe 与主框架相互访问方法  http://blog.csdn.net/fdipzone/article/details/17619673/ 1.同域相互访问 假设A.html 与 b.htm ...

  7. cordova AndroidStudio3.0 升级报错问题

    http://blog.csdn.net/z_Xiaozuo/article/details/78962701 ionic3 打包 安卓项目遇到的问题,当时比较冲忙升级了下android studio ...

  8. Microsoft Graph 概述

    这个系列文章 已经进行到了实质的阶段,继上一篇介绍了如何搭建Office 365开发环境之后,我会通过这篇文章给大家介绍一个非常重要的概念:Microsoft Graph.它之所以重要,首先是因为它是 ...

  9. linux下安装mysql-5.6.41

    1.下载安装包,下载地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads .选择完版本,然后点击下方 No thanks, just ...

  10. <a>之间怎么放值</a> 挺简单的，第一次遇到···

    需求描述:对列表中的某一列内容添加a标签(其实就是对td标签下添加a标签了). 思路简介:拿到这个我首先的反应就是在td标签对text获取内容的代码中动态拼接<a></a>字符 ...