zoukankan      html  css  js  c++  java
  • 使用Jquery Viewer 展示图片信息

    <!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

  • 相关阅读:
    html文本超出自动换行、显示省略号
    angular第三天
    angular第二天
    angular第一天
    jQuery基础:keydown( ) 与 keypress( ) 区别
    jQuery基础:mouseeter( ) 与 mouseover( ) 区别
    jQuery基础:remove()与 detach()区别
    jQuery基础:获取元素内容
    (一)数组或对象中最会一个属性是否该加逗号的测试
    jQuery基础:prop()与attr()的区别
  • 原文地址:https://www.cnblogs.com/xiaoxiangpaou/p/10282568.html
Copyright © 2011-2022 走看看