非微信圖文網頁在微信中點擊放大滑動瀏覽

在微信圖文網頁中，當點擊圖片時會放大圖片並支持滑動瀏覽，那麼，非微信圖文在微信中瀏覽時，當點擊圖片後，怎麼才能達到這種效果了？好在微信公衆號的js-sdk中提供了圖片預覽接口：

wx.previewImage({
    current: '', // 當前顯示圖片的http連接
    urls: [] // 須要預覽的圖片http連接列表
});

1.爲了簡化代碼，首先引入jq（此處省略），第一步則是獲取圖片, obj爲圖片容器，例入("wraper img")。

function getImg(obj){
            var m = [];
            for(var i=0; i< obj.length; i++){
                m[i] = obj[i].src;
            }
            
            return m;
        }

2.新建函數preview，用來調用微信圖片預覽接口，代碼以下：

function preview(current, urls){
                    if(!current || urls.length == 0){
                        return ;
                    }
                    WeixinJSBridge.invoke('imagePreview', { 
                        'current': current,
                        'urls': urls
                    });
                }

3.新建點擊圖片的函數img_click;其意義是當點擊圖片時，把全部要顯示的圖片存入數組而且傳遞給js-sdk的圖片預覽接口，而後放大顯示圖片，代碼以下：

function imgClick(obj){
            $(obj).click(function(){
                var src = getImg(obj);
                var curent = $(this).index();
                preview(src[curent], src);
            });
        }

4.最後當調用執行imgClick便可