<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Viewer.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="../dist/viewer.css">
</head>
<body>
<div class="container">
<h1>Show a viewer dynamically on click a button</h1>
<button type="button" class="btn btn-primary" id="button" onclick="showimages();">
Launch the demo
</button>
</div>

<ul id="viewer" class="ulline">

<li><img src="1.jpg" data-original="大图地址"></li>

<li><img src="2.jpg" data-original="大图地址"></li>

<li><img src="3.jpg" data-original="大图地址"></li>

<li><img src="4.jpg" data-original="大图地址"></li>

</ul>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="../dist/viewer.js"></script>
<script>

function showimages(){

var viewer = new Viewer(document.getElementById("viewer"), {
url(image) {
return image.attributes["data-original"].value;//设置展示大图的地址
},
hidden: function () {
viewer.destroy();
},
viewed() {
viewer.zoomTo(1);//设置显示百分比  1标示百分之100  0标示百分之0
},
});
viewer.show();

}
</script>
</body>
</html>

插件下载地址 https://files.cnblogs.com/files/xiaoxiangpaou/viewerjs-master.zip

使用Jquery Viewer 展示图片信息的更多相关文章

  1. jquery视频展示 图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML Viewer展示不同字体

    过去有相关帖子提到Power BI可以使用不同字体.小悦也最近也找了一些方法尝试.如果大家想要在Power BI展示更多类型的字体,可以使用HTML Viewer自定义控件,增加额外的字体.大家可以利 ...

  3. 腾讯新闻多图jQuery相册展示效果代码

    腾讯新闻多图jQuery相册代码,带左右切换箭头,带缩略图,可左右切换,点击缩略图展示原图. 在线演示本地下载

  4. jquery表格展示

    用bootstrap设计一个弹框,然后在弹框里面生成表格 <html> <head> <link rel="stylesheet" href=&quo ...

  5. jquery分页展示控件：kkpager

    kkpager v1.2 js分页展示控件,传入简单参数就能使用的分页效果控件 准备工作,引入js.css <script type="text/javascript" sr ...

  6. jquery 动态展示查询条件

    <table class="queryTable" width="100%" > <tr> <td class="que ...

  7. jquery实现同时展示多个tab标签+左右箭头实现来回滚动

    内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...

  8. 即时新闻展示插件jQuery News Ticker，超级简单！

    有时候我们为了节省页面空间,会在页面明显处放一小条,用来展示比较重要的即时新闻,一般以轮播的形式出现.今天要介绍的jQuery News Ticker插件就是用来实现这个即时新闻展示功能的,效果图如下 ...

  9. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

随机推荐

  1. Fiddler基础教程

    一.Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.com Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料. Fiddler ...

  2. CentOS随笔 - 5.CentOS7安装Sql Server 2017

    前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 开发环境嘛, 作为.Net系Sql Server那是必备的. 听过Sql server可以安装在Linux上了 ...

  3. Spring MVC 4常用的那些注解

    Spring从2.5版本开始在编程中引入注解,用户可以使用@RequestMapping, @RequestParam, @ModelAttribute等等这样类似的注解.到目前为止,Spring的版 ...

  4. 用字典给Model赋值并支持map键值替换

    用字典给Model赋值并支持map键值替换 这个是昨天教程的升级版本,支持键值的map替换. 源码如下: NSObject+Properties.h 与 NSObject+Properties.m / ...

  5. 利用Django实现RESTful API(一)

    RESTful API现在很流行,这里是它的介绍 理解RESTful架构和 RESTful API设计指南.按照Django的常规方法当然也可以实现REST,但有一种更快捷.强大的方法,那就是 Dja ...

  6. Python学习---IO的异步[asyncio +aiohttp模块]

    aiohttp aiohttp是在asyncio模块基础上封装的一个支持HTTP请求的模块,内容比8.4.2[基于asyncio实现利用TCP模拟HTTP请求]更全面 安装aiohttp: pip3 ...

  7. 铁乐学python_day20_面向对象编程2

    面向对象的组合用法 软件重用的重要方式除了继承之外还有另外一种方式,即:组合 组合指的是,在一个类中以另外一个类的对象作为数据属性,称为类的组合. 例:人狗大战,人类绑定上武器来对狗进行攻击: # 定 ...

  8. September 23rd 2017 Week 38th Saturday

    Lonely people will always remember his life occurred in each person. 寂寞的人总是会用心记住他生命中出现过的每个人. If you ...

  9. Java重写&重载

      在学习完类和对象后,接下来就要进入面向对象的内容了,先从重写和重载开始吧.重写(Override)和重载(Overload)是两个不同的概念,也是两个容易混淆的概念,下面具体来说说这两者. 重写( ...

  10. SAP 前端技术的演化史简介

    Jerry之前曾经写过一篇微信公众号文章,题目叫<> 关注我的公号"汪子熙"后,在历史菜单"前端开发相关"里即可找到这篇文章: 该文章简单回顾了SA ...