微信端网页中图片的展示方式

一、微信端网页中图片的展示方式

　　微信端网页中图片有两种展示方式：平铺与图集。平铺的时候文档内的所有图片全部展开，点击图片则放大。图集的时候只展示一张图片，点击图片的时候以翻页的方式展示一组图片。实现原理对于如下一个图片标签,data-gid用于存放组标识，同一组的data-gid相同。data-index用于存放组中图片的展示顺序，不能相同。onclick中根据data-src处理图片展示。对于图集就只显示一张其他的img设置为隐藏，src与第一个图片一样，或者为空，这样可以减少网页的加载量，提高访问效率。data-src保存图片的真正访问路径。

 <img src="http://c.hiphotos.baidu.com/image/pic/item/43a7d933c895d143175ffe2971f082025aaf078a.jpg" 
 data-src="http://c.hiphotos.baidu.com/image/pic/item/43a7d933c895d143175ffe2971f082025aaf078a.jpg"
 data-gid="g2" data-index="1" onclick="showImg('g2', 1);">

二、图集的实现　

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head> 
 4 </head>
 5 <body>
 6 <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" onclick="showImg(1,1);" data-gid="1"  data-index="1">
 7  <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file20.mafengwo.net/M00/03/26/wKgB3FDkRIiAAyvuABQ-Je1TOyw16.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,2);" data-gid="1"  data-index="2">
 8  <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file21.mafengwo.net/M00/BE/89/wKgB3FE63pWAApk2AANestUDQdA39.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,3);" data-gid="1"  data-index="3"> 
 9  <img src="http://file4.mafengwo.net/M00/1C/D7/wKgBm07XPbnSQZx0AAIqMAJ8jKk61.m_rbook_comment.w475.jpeg" data-src="http://file25.mafengwo.net/M00/11/66/wKgB4lMK7gqAFTYQAALmxMPzzAc91.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg(1,4);" data-gid="1"  data-index="4">    <br>
10  
11  <img src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" data-src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg"  onclick="showImg('a',1);" data-gid="a"  data-index="1"> 
12  <img src="http://file4.mafengwo.net/M00/8C/3D/wKgBm04CpfHu_HchAAGYp2Llh6A18.rbook_comment.w235.jpeg" data-src="http://file20.mafengwo.net/M00/A4/2E/wKgB3FDvuzyARycuAAY-YDf0uJ409.rbook_comment.w235.jpeg" style="display:none;" onclick="showImg('a',2);" data-gid="a"  data-index="2"> 
13    
14 <script type="text/javascript">
15  
16 var imgDate = {};//二位数组，保持图片的组别，顺序和地址信息
17 var imgs = document.getElementsByTagName("img"); 
18 for(var i = 0; i < imgs.length; i++){
19     var img = imgs[i];
20       var index = img.getAttribute("data-index");//存放索引
21     var gid = img.getAttribute("data-gid");//组号 data-gid 存放组号
22     var dsrc = img.getAttribute("data-src");//地址 
23     if(index && gid && dsrc){ 
24         imgDate[gid] = imgDate[gid]||[]; //该组不存在则创建
25         imgDate[gid][index] = dsrc;//按照索引设置地址
26     }
27 } 
28  //点击图片时调用，groupid组号，index索引号
29 function showImg(groupid, index) {  
30     if (typeof window.WeixinJSBridge != 'undefined') {
31         WeixinJSBridge.invoke('imagePreview', {
32             'current' : imgDate[groupid][index],//当前地址
33             'urls' : imgDate[groupid] //组
34         });
35     }else{
36         alert(groupid+"请在微信中查看"+index, null, function(){});
37     }
38 } 
39 </script>
40 </body>
41 </html>

这里定义了两组图片组，在微信段查看就可正常运行。在普通浏览器中点击图片会提示使用微信查看。

　　如果使用了iframe，需要iframe中的图片也能达到这样的效果，就需要修改showImg函数，修改后的函数如下：

 function showImage(groupid, index) {
            var wxJSbridge = window.WeixinJSBridge || parent.window.WeixinJSBridge;
            // alert(typeof window.WeixinJSBridge);
             alert(typeof wxJSbridge);
            if (typeof wxJSbridge != 'undefined' ) {
                wxJSbridge.invoke('imagePreview', {
                    'current' : imgDate[groupid][index],
                    'urls' : imgDate[groupid]
                });
            }else{
                alert("请在微信中查看", null, function(){});
            }
  }

 

posted on 2014-07-23 21:57  烟火_  阅读(2575)  评论(0)  编辑  收藏  举报

导航