<!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. Java volatile关键字解惑

    volatile特性 内存可见性:通俗来说就是,线程A对一个volatile变量的修改,对于其它线程来说是可见的,即线程每次获取volatile变量的值都是最新的. volatile的使用场景 通过关 ...

  2. jQuery轮播图（手动点击轮播）

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  3. java 内存分析之堆栈空间

    package Demo; public class Demo { public static void main(String[] args) { Demo demo = new Demo(); ; ...

  4. 【日常记录】【unity3d】 获取手柄轴的输入

    参考 https://blogs.msdn.microsoft.com/nathalievangelist/2014/12/16/joystick-input-in-unity-using-xbox3 ...

  5. git repo代码部署策略及工具

    一般在项目或者产品开发流程中,先是开发人员在本地做好开发及测试,其中可能包含很多用于测试用的目录以及源代码文件,在部署前往往会有一个build过程.web项目最终build产生出优化生产环境下减少ht ...

  6. UpdateServer事务实现机制

    UpdateServer(UPS) 是OceanBase的写入单点,一个集群中只有一台UPS服务器,所有的写都写入到这台机器.OceanBase采用基于静动态数据分离的机制,静态数据存储在静态数据服务 ...

  7. Oracle EBS 表空间

    -- DATA 这里仅提供查询锁和解锁.有时,锁是正常的,所以杀掉正锁着的进程有一定的风险性. 具体步骤如下: -- 1.0 查看 holder的进程 , 'Holder: ', 'Waiter: ' ...

  8. Ajax 请求下载 Execl 文件

    通过Ajax请求下载Execl 的问题,掉进一个坑里半个多小时,特此来记录一下 . 起初  我误以为是后台的问题,然而调试了一下并不是这样的,也不会报错,且进入了success 函数. 以下的事件及请 ...

  9. idea指定SpringBoot启动.properties文件

    比如我的项目下有2个.properties文件,一个是application.properties,一个是application-local.properties,在本地的时候想指定用applicat ...

  10. SQLMap-----初识

    前言 昨天收到一封来自客户网络中心发来的邮件,说是之前的一个项目存在sql注入漏洞,并附上了一张sqlmap检测结果的图片.记得第一次接触sql注入这些关于系统安全的问题还是从老师口中得知,当时也了解 ...