<!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. ios虚拟机安装（四）

    Virtual Machine Settings: Processors(Virtual Intel VT-X/EPT or AMD-V/RVI 一定要打勾) Floppy(软驱) (必须remove ...

  2. frame shiro 认证示例及原理简述

    shiro 认证流程 1.创建一个 javaSE 的maven项目(quickstart),并添加依赖 <dependency> <groupId>junit</grou ...

  3. 【个人经历】记自己的第一次GitHub开源代码共享经历

    题记: 自己做程序员快三年有余了,感觉自己和刚入职相比确实有了不少进步,当然三年要是不进步那不就傻了吗,有时候我也在想,我在这三年里留下了什么,当然也不是说有多么高尚的想法,就是以后对别人介绍自己的时 ...

  4. zookeeper应用 - 监控

    服务器端:监听zk上父节点的子节点变化 package monitor; import java.util.List; import java.util.concurrent.CountDownLat ...

  5. 带你从零学ReactNative开发跨平台App开发（七）

    ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...

  6. 查找并修复Android中的内存泄露—OutOfMemoryError

    [编者按]本文作者为来自南非约翰内斯堡的女程序员 Rebecca Franks,Rebecca 热衷于安卓开发,拥有4年安卓应用开发经验.有点完美主义者,喜爱美食. 本文系国内ITOM管理平台 One ...

  7. LeetCode题解Transpose Matrix

    1.题目描述 2.题目描述 直接申请内存,转置即可. 3.代码 vector<vector<int>> transpose(vector<vector<int> ...

  8. pandas模块安装问题笔记

    1. # pip install  pandas 引用 pandas 时,没有模块 ,进行模块安装,出现一推英文提示 结果 Collecting pandas Could not fetch URL ...

  9. openoffice centos7.4 安装

    其他是配置好java环境后操作 1.下载软件 http://www.openoffice.org/download/other.html 2.安装 tar xf Apache_OpenOffice_4 ...

  10. spring-boot-jpa 自定义查询工具类

    1.pom文件中添加如下配置 <dependency> <groupId>org.springframework.boot</groupId> <artifa ...