<!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. 填报表导出excel非可写单元格锁定问题

     问题描述: 填报表单元格分为可写和不可写两种状态,当填报表在web上展现的时候可写单元格可以进行数据填报和修改,非可写单元格不可操作. 报表导出为excel时,润乾导出excel包默认情况下不对 ...

  2. 《Think in JAVA》之每日一读(initianlize)——2013/11/12、13

    了解包括继承在内的初始化全过程,以对所发生的的一切有一个全局的把握,是很有益的. 请看下例: package initialize; class Insect { private int i = 9; ...

  3. springboot学习入门之三---启动原理

    3启动原理 3.1启动类 @SpringBootApplication public class Application { public static void main(String[] args ...

  4. bootstrap作为mixin库的应用模式

    Bootstrap作为一个非常流行的前端css框架,得到了非常多的应用.一般的使用方法都是直接download bootstrap.css,作为css文件引入到html的markup中,随后直接引用其 ...

  5. Oracle EBS AR 客户取数SQL

    SELECT acct.cust_account_id, acct.party_id, acct.account_number, party.party_name, lkp1.meaning part ...

  6. voltdb数据库持久性，扩展集群

    之前在git上下载的voltdb,以及在官网下载的社区版voltdb均不支持持久性事务,和扩展集群,今天下载了企业试用版voltdb,安装过程不再赘述,记录一下我的使用过程 持久性测试 以前的 vol ...

  7. 12.2Data Guard新特性--使用DBMS_DBCOMP.DBCOMP数据比较

          Oracle Data Guard会主动对Hot数据(数据正被读取或修改)执行验证, 无论是primary还是standby,但对于那些Cold数据不会做任何检查和校验.所以在12.2版本 ...

  8. javascript中return的作用

    这里面的return含有一些细节知识: 例如:onClick='return add_onclick()'与 onClick='add_onclick()'的区别 JAVASCRIPT在事件中调用函数 ...

  9. Linux通过docker安装运行酷Q--用QQ骰子君进行跑团

    Linux通过docker安装运行酷Q 文:铁乐与猫 需求:和小伙伴周末进行愉快的TRPG跑团,需要在QQ讨论组上加了qq小号后,将qq小号用酷Q配合投骰的应用变成骰子君. 限制:我个人的云计算服务器 ...

  10. TreeSet的自然排序(自定义对象 compareTo方法)

    >要实现自然排序,对象集合必须实现Comparable接口,并重写compareTo()方法 >一般需求中描述的是"主要条件",如:按姓名长度排序.  需注意次要条件 ...