微信文章中图片点击放大,可滑动(补全路径)

2019-05-10  本文已影响0人  王远清orz
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

  // 点击查看大图

  function funcReadImgInfo() {

    var imgs = [];

    var imgObj = $('.rich-media img');//这里改成相应的对象
    var protocol = window.location.protocol;//获取协议
    var host = window.location.host;//获取主地址
    var port = window.location.port;//获取端口

    for (var i = 0; i < imgObj.length; i++) {

      var src = imgObj.eq(i).attr('src');
      //判断地址是否有http开头,如果没有补全路径
      src = src.substr(0, 4).toLowerCase() == "http" ? src : protocol + '//' + host + src;

      imgs.push(src);

      imgObj.eq(i).click(function () {

        var nowImgurl = $(this).attr('src');
        nowImgurl = nowImgurl .substr(0, 4).toLowerCase() == "http" ? nowImgurl : protocol + '//' + host + nowImgurl ;//改大图的地址,不加会导致本地上传图片,点击查看显示第一张
        console.log(nowImgurl)
        WeixinJSBridge.invoke("imagePreview", {

          "urls": imgs,

          "current": nowImgurl

        });

      });

    }

  }

  funcReadImgInfo();
</script>

注意
a.图片用绝对路径,用相对路径会访问不到;
b.测试效果要在微信上测试(在电脑浏览器测试会报错,在微信开发者工具点击图片没有效果)

上一篇下一篇

猜你喜欢

热点阅读