<!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. TensorFlow分布式部署【多机多卡】

    让TensorFlow们飞一会儿 前一篇文章说过了TensorFlow单机多卡情况下的分布式部署,毕竟,一台机器势单力薄,想叫兄弟们一起来算神经网络怎么办?我们这次来介绍一下多机多卡的分布式部署. 其 ...

  2. 少个人保护？我来！——阿里云在ICANN第3届GDD峰会纪实

    西班牙马德里以足球和斗牛闻名于世,2017年5月9日至11日,ICANN第三届全球域名部门行业峰会(GDD)在这里召开.阿里云作为亚洲域名保有量最高的注册商,代表成千上万客户的利益与权力,派出代表,前 ...

  3. 利用 NGINX 最大化 Python 性能，第二部分：负载均衡和监控

    [编者按]本文主要介绍 NGINX 的主要功能以及如何通过 Nginx 优化 Python 应用性能.本文系国内 ITOM 管理平台 OneAPM 编译呈现. 本文上一篇系: 利用 NGINX 最大化 ...

  4. ASP.NET中使用UpdatePanel时用Response输出出现错误的解决方法

    asp.net中执行到Response.write("xx");之类语句或Microsoft JScript 运行时错误: Sys.WebForms.PageRequestMana ...

  5. SQLServer Temp tables 数据疑问

    1. 现象 使用Cacti监控,有关于临时表的一个图形 可以看到正在使用的临时表Active Temp Tables的数量非常大,并且在非工作时间,也维持在400个左右.感觉非常奇怪,所以追查下! 2 ...

  6. Oracle常见等待事件

    1Buffer busy waits从本质上讲,这个等待事件的产生仅说明了一个会话在等待一个Buffer(数据块),但是导致这个现象的原因却有很多种.常见的两种是: ·         当一个会话视图 ...

  7. [WINCE|VS2008] 用在PC上调试WINCE程序

    http://www.danielmoth.com/Blog/deploy-to-my-computer.aspx 作者:The Moth 步骤: 1. 在VS2008中打到 Device Optio ...

  8. UITabBar设置详解

    UITabBar设置详解 效果图 说明 1. 设置tabBarItem中的图片以及标题 2. 设置标题文本样式 3. 修改tabBar背景色 源码 https://github.com/YouXian ...

  9. 铁乐学python_day25_序列化模块

    铁乐学python_day25_序列化模块 部份内容摘自博客http://www.cnblogs.com/Eva-J/ 回顾内置方法: __len__ len(obj)的结果依赖于obj.__len_ ...

  10. HTTP 错误 404.3 - Not Found的问题（WCF）

    模块 StaticFileModule 通知 ExecuteRequestHandler 处理程序 StaticFile 错误代码 0x80070032 请求的 URL http://10.101.3 ...