微信预览图片放大

**

微信预览图片放大

**
以TP3.2为例

function newsdetail() {
	$id = I ( 'id' );
	// 获取文章详情
	$info = M ( 'news' )->where ($id)->find ();
	$this->assign ( 'info', $info );
	$this->display ();
}

newsdetail.html中,展示文章内容代码为:{$info.content|htmlspecialchars_decode}
js代码

$(function(){
	var imgObj = $("img");
	funcReadImgInfo(imgObj);// 调用预览放大方法
	
	/*此方法用来解决,微信H5图片点击放大*/
	function funcReadImgInfo(imgObj){
		var img_base = "{:SITE_URL}";
	    var imgs = [];

	    for(var i=0; i<imgObj.length; i++){
	    	var str = imgObj.eq(i).attr('src');
	    	// 判断是否存在http字符串
			if (str.indexOf("http") != -1 ) {
				var url = str;
			} else {
				var url = img_base+str;
			}
	        imgs.push(url);
	        // 当点击图片时触发的事件
	        imgObj.eq(i).click(function(){
	            var nowImgurl = $(this).attr('src');
	            // 判断是否存在http字符串
				if (nowImgurl.indexOf("http") != -1 ) {
					var url2 = nowImgurl;
				} else {
					var url2 = img_base+nowImgurl;
				}
	            if (typeof window.WeixinJSBridge == "undefined"){ 
				    $(document).on('WeixinJSBridgeReady',function(){
				    	 //微信图片集查看,调用接口
				         WeixinJSBridge.invoke("imagePreview",{
			                "urls":imgs,//组
			                "current":url2//当前地址
			            });
				   }); 
				} else {
				  WeixinJSBridge.invoke("imagePreview",{
	                "urls":imgs,
	                "current":url2
	           	 });
				}
	        });
	    }
	}

	

});

猜你喜欢

转载自blog.csdn.net/qq_36377320/article/details/88739080