微信公众号H5文中图片点击预览放大缩小、滑动效果实现(两种方式）

1、第一种直接使用微信js-sdk，jweixin-1.6.0.js

var imgs = $("#preview").find("img");
var imgsSrc =  new Array();
for(k = 0,len=imgs.length; k < len; k++) {
    imgsSrc[k] = $("#preview").find("img").eq(k).attr("src");
}
$("img.fr").click(function () { wx.previewImage({
        current: $(this).attr("src"), // 当前显示图片的http链接
        urls: imgsSrc // 需要预览的图片http链接列表[]像这种其实就是数组
    });
})

2、使用weui photo Browser和swiper

swiper.js 、jquery-weui.min.js、jquery.min.js
<style type="text/css"> /*注意图片弹出置顶防止图片过长和不居中*/ .weui-photo-browser-modal .photo-container img { max-height: 100%; } .weui-photo-browser-modal .photo-container { justify-content: center; } </style>

var pb = $.photoBrowser({
    items: imgsSrc,
    onSlideChange: function(index) {
        console.log(this, index);
    },

    onOpen: function() {
        //注意图片弹出置顶
        $(this.modal).css('z-index',6666);
        console.log("onOpen", this);
    },
    onClose: function() {
        console.log("onClose", this);
    }
});

$("img.fr").click(function () {
    pb.open(imgsSrc.indexOf($(this).attr("src")));
})