查看图片插件--Viewer(类似于qq和微信聊天 的查看图片)

Viewer的github地址:https://github.com/fengyuanchen/viewer  下载该插件(在文件夹dist里面)

具有参考价值的几个网站:http://www.dowebok.com/demo/192/index3.html      http://www.szbelle.com/article/2890.html      http://www.jq22.com/jquery-info6536

Viewer的使用,参考:http://www.dowebok.com/demo/192/  ,有简单介绍在原生js和jquery中使用,以及回调函数和自定义函数的使用。

  • 静态加载图片 查看: 需要引入jqueryJS、viewer的js css 文件,就可使用强大的Viewer

    <div class="meetingCons" id="chatConDivs" style="overflow:auto;">
             <div id="show">
            <span>2222</span>
            <img data-original="./a.png" src="./a.png" >
            </div>
        <div id="show">
            <span>2222</span>
            <img data-original="./b.png" src="./b.png" >
        </div>
        <div id="show">
            <span>2222</span>
            <img data-original="./applySpeak.png" src="./applySpeak.png" >
        </div>
            <p class="message_time con">2017/8/17 下午2:25:38</p>
            <div class="me con">
                <h5 class="name">我@所有人</h5>
                <div id="show"><div>
                <p style="margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; text-indent:0px">
                    <img id="897990180693082112_1502951138405" data-original="./min.png" src="./sss.png">
                </p>
            </div>
        </div>

    JS引用viewer插件

    $(‘.meetingCons‘).viewer(‘data-original‘);//一定需要个容器包含所有的img标签,通过url:data-original将所有的img的图片缓存
  • 类似于QQ、微信聊天中会有发送图片,并不是静态加载的图片,这时候需要调用Viewer的方法,需要在js运行时先加载所有的图片,然后在发送图片后或者接收图片后在执行update方法

 

$(‘.meetingCons‘).viewer("data-original");//viewer加载所有的聊天图片
$(‘.meetingCons‘).viewer("update");//viewer更新所有的图片

 

 

 

查看图片插件--Viewer(类似于qq和微信聊天 的查看图片)

上一篇:C#开发微信公众号-学习笔记


下一篇:一行代码验证微信服务器配置