微信文章中图片点击放大,可滑动(补全路径)
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.测试效果要在微信上测试(在电脑浏览器测试会报错,在微信开发者工具点击图片没有效果)