var FCAPP = FCAPP || {}, myScroll; FCAPP.HOUSE = FCAPP.HOUSE || {}; FCAPP.HOUSE.Picroll = { CONFIG: { zoomTime: 200 }, RUNTIME: { findCategory: false }, init: function() { var R = Picroll.RUNTIME; if (!R.binded) { R.binded = true; Picroll.initElements(R); Picroll.bindEvents(R); R.detailState = 'hide'; R.zoomed = false; R.template = FCAPP.Common.escTpl($('#template').html()); R.imgDom = []; R.w = document.documentElement.clientWidth; R.h = document.documentElement.clientHeight; window.shareData = window.shareData || {}; R.isWeixin = /MicroMessenger/.test(navigator.userAgent); if (R.isWeixin) { R.zoomBtn.hide(); R.downBtn.hide(); R.zoomDiv.hide(); } else { R.zoomBtn.show(); R.downBtn.show(); } } // Picroll.loadData(); // var id = ''; // window.shareData.linkKeep = '/Webestate/Housedata/pid/'+PID+'/wechatid/'+WECHATID; // window.shareData.link = window.shareData.linkKeep; // if (window.gQuery && gQuery.id) { // id = gQuery.id; // window.shareData.link += '&id=' + id; // window.shareData.linkKeep += '&id=' + id; // } // if (window.gQuery && gQuery.houseid) { // window.shareData.link += '&houseid=' + gQuery.houseid; // window.shareData.linkKeep += '&houseid=' + gQuery.houseid; // } // FCAPP.Common.loadShareData(id); // FCAPP.Common.hideToolbar(); }, initElements: function(R) { R.picDetail = $('#picDetail'); R.detailCav = $('#detailContainer'); R.closeBtn = $('a.btn_show_close'); R.zoomBtn = $('a.btn_zoom_out'); R.popTips = $('#popTips'); R.downBtn = $('a.btn_down'); R.picTank = $('#picTank'); R.zoomDiv = $('#zoomDiv'); }, bindEvents: function(R) { R.closeBtn.click(Picroll.closePage); R.zoomBtn.click(Picroll.zoomPic); R.downBtn.click(Picroll.downPic); $(window).resize(Picroll.resizeLayout); FCAPP.Common.resizeLayout(R.popTips); }, resizeLayout: function() { var R = Picroll.RUNTIME, t = R.loadSize.length; R.w = document.documentElement.clientWidth; R.h = document.documentElement.clientHeight; t *= R.w; R.picTank.css({ width: t + 'px', height: R.h + 'px' }); for (var i = 0, il = R.imgDom.length; i < il; i++) { Picroll.loadedImgProcess(R.imgDom[i]); } FCAPP.Common.resizeLayout(R.noticeDiv); try { myScroll.refresh(); } catch(e) {} }, closePage: function() { FCAPP.Common.jumpTo('house.html', { '#wechat_webview_type': 1 }, true); }, switchDetail: function() { var R = Picroll.RUNTIME; if (R.detailState == 'hide') { R.detailState = 'show'; R.detailCav.addClass('type_full'); R.closeBtn.hide(); R.zoomBtn.hide(); R.downBtn.hide(); } else { R.detailState = 'hide'; R.detailCav.removeClass('type_full'); if (!R.isWeixin) { R.closeBtn.show(); R.zoomBtn.show(); R.downBtn.show(); } } }, // loadData: function() { // window.showRooms = Picroll.showRooms; // var datafile = window.gQuery && gQuery.id ? gQuery.id + '.': '', // dt = new Date(); // datafile = datafile.replace(/[<>\'\"\/\\&#\?\s\r\n]+/gi, ''); // datafile += 'rooms.js?'; // $.ajax({ // //url: 'http://trade.qq.com/fangchan/static/' + datafile + dt.getDate() + dt.getHours(), // url: '/Webestate/Housedata/pid/'+PID+'/wechatid/'+WECHATID, // dataType: 'jsonp', // error: function() { // FCAPP.Common.msg(true, { // msg: '数据加载失败!' // }); // } // }); // }, showRooms: function(res) { var R = Picroll.RUNTIME, data, idx = -1, find = false; FCAPP.Common.hideLoading(); data = res.rooms; for (var i = 0, il = data.length; i < il; i++) { if (data[i].id == gQuery.houseid) { idx = i; break; } } if (idx == -1) { FCAPP.Common.msg(true, { msg: '没找到该户型' }); } else { find = true; Picroll.renderPics(data[idx]); } R.findCategory = find; R.closeBtn.show(); }, renderPics: function(room) { var R = Picroll.RUNTIME, List = [], pics = room.pics || [], detail = '', imgdata = 'src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="'; R.loadSize = []; R.Img = []; R.ImgName = []; window.shareData.desc = '户型【平面】-' + room.desc.replace(/\.jpe?g$/gi, '') + ' ' + room.name.replace(/\.jpe?g$/gi, ''); window.shareData.descKeep = '户型【平面】-' + room.desc.replace(/\.jpe?g$/gi, '') + ' ' + room.name.replace(/\.jpe?g$/gi, ''); room.total = 1 + pics.length; detail = $.template(R.template, { data: room }); List.push('<img id="pic0" idx="pic0" width="' + R.w + '" border="0" height="' + R.h + '" ' + imgdata + '>'); R.Img.push(room.bimg); R.ImgName.push([1 + '/' + (pics.length + 1), room.desc.replace(/\.jpe?g$/gi, ''), room.name.replace(/\.jpe?g$/gi, '')]); R.loadSize.push({ w: room.width, h: room.height }); for (var i = 0, il = pics.length; i < il; i++) { List.push('<img id="pic' + (1 + i) + '" idx="pic' + (1 + i) + '" width="' + R.w + '" border="0" height="' + R.h + '" ' + imgdata + '>'); R.Img.push(pics[i].img); R.ImgName.push([(i + 2) + '/' + (il + 1), pics[i].name.replace(/\.jpe?g$/gi, ''), room.name.replace(/\.jpe?g$/gi, '')]); R.loadSize.push({ w: pics[i].width, h: pics[i].height }); } R.picTank.html(List.join('')); R.picDetail.html(detail); FCAPP.Common.loadImg(R.Img[0], 'pic0', Picroll.loadedImgProcess); R.picTank.css('width', R.w * R.Img.length + 'px'); Picroll.initScroll(); }, renderMsg: function(idx) { var R = Picroll.RUNTIME; if (!R.idxCav) { R.idxCav = $('#typeNum'); } if (R.ImgName[idx]) { R.idxCav.html(R.ImgName[idx].slice(0, 2).join(' ')); } }, // downPic: function() { // var R = Picroll.RUNTIME; // if (!R.findCategory) { // return; // } // if (R.pic) { // window.sendMsgResult = Picroll.sendMsgResult; // var data = { // cmd: 'picsend', // appid: window.gQuery && gQuery.appid ? gQuery.appid: '', // wticket: window.gQuery && gQuery.wticket ? gQuery.wticket: '', // picurl: R.pic, // picname: R.picName, // callback: 'sendMsgResult' // }; // $.ajax({ // url: 'http://cgi.trade.qq.com/cgi-bin/common/weixin_helper.fcg?' + $.param(data), // dataType: 'jsonp' // }); // } // }, sendMsgResult: function(res) { if (res.ret == 0) { FCAPP.Common.msg(true, { msg: '已发送这张图片给你的微信' }); } else { FCAPP.Common.msg(true, { msg: '保存失败,请稍后尝试' }); } }, zoomPic: function() { var R = Picroll.RUNTIME, C = Picroll.CONFIG; if (!R.findCategory) { return; } if (R.zoomed) { Picroll.zoomOut(R, C.zoomTime); } else { Picroll.zoomIn(R, C.zoomTime); } }, zoomIn: function(R, timeout) { R.zoomed = true; var idx = myScroll.currPageX, src = R.Img[idx], w = R.imgDom[idx].width * 2, h = R.imgDom[idx].height * 2; cw = Math.max(w, R.w); R.zoomIdx = idx; R.zoomBtn[0].className = 'btn_zoom_in'; R.zoomDiv.show(); R.detailCav.hide(); FCAPP.Common.loadImg(src, 'zoomImg', function(img) { if (idx != 0) { img.width = w; img.height = h; } else { img.width = img.width; img.height = img.height; } var padding = 'padding-left:0px;'; if (img.width < cw) { padding = 'padding-left:' + (cw - img.width) / 2 + 'px;'; } img.id = 'zoomImg'; img.style.cssText = 'overflow:hidden;width:' + img.width + 'px;height:' + img.height + 'px;' + padding; img.onclick = Picroll.showBtn; R.downBtn.hide(); R.zoomBtn.hide(); R.zoomDiv.css({ width: img.width + 'px', height: img.height + 'px' }); setTimeout(function() { document.body.scrollTop = img.height / 3; }, 150); }, true); }, zoomOut: function(R, timeout) { R.zoomed = false; R.zoomDiv.hide(); R.detailCav.show(); R.zoomBtn[0].className = 'btn_zoom_out'; R.picTank.css('height', R.h + 'px'); myScroll.refresh(); setTimeout(function() { R.zoomDiv.css({ width: '100%', height: '100%' }); R.downBtn.show(); R.zoomBtn.show(); $('#zoomImg').prop('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); }, timeout); }, viewImg: function(index) { var R = Picroll.RUNTIME, idx = myScroll.currPageX, src = R.Img[idx], content = R.ImgName[idx].slice(1, 2).join(' '); if (index) { R.imgViewRetry = index; } else { R.imgViewRetry++; } try { WeixinJSBridge.invoke('imagePreview', { content: content, urls: [src] }); } catch(e) { if (R.imgViewRetry < 10) { setTimeout(Picroll.viewImg, 200); } else { R.isWeixin = false; Picroll.showBtn(); } } }, showBtn: function() { var R = Picroll.RUNTIME; if (R.isWeixin) { Picroll.viewImg(1); } else { if (R.downBtn[0].style.display == 'none') { R.downBtn.show(); R.zoomBtn.show(); } else { R.downBtn.hide(); R.zoomBtn.hide(); } } }, initScroll: function() { var R = Picroll.RUNTIME; myScroll = new iScroll('detailContainer', { zoom: false, snap: true, momentum: false, hScrollbar: false, vScrollbar: false, fixScrollBar: true, hScroll: true, onScrollEnd: function() { var idx = myScroll.currPageX; FCAPP.Common.loadImg(R.Img[idx], 'pic' + idx, Picroll.loadedImgProcess); Picroll.renderMsg(idx); R.pic = R.Img[idx]; R.picName = R.ImgName[idx].slice(1, 3).join(' '); } }); R.pic = R.Img[0]; R.picName = R.ImgName[0].slice(1, 3).join(' '); }, loadedImgProcess: function(img) { var R = Picroll.RUNTIME; idx = img.idx.replace(/[^\d]+/g, ''), size = R.loadSize[idx], pw = img.width, ph = img.height, sw = R.w, sh = R.h, fw = 0, fh = 0, style = ''; img.id = img.idx; if (pw == 0) { pw = size.w; } if (ph == 0) { ph = size.h; } if (ph / pw < sh / sw) { fw = sw; fh = Math.floor(ph * sw / pw); style = 'margin:' + Math.floor((sh - fh) / 2) + "px 0;"; } else { fh = sh; fw = Math.floor(pw * sh / ph); style = 'margin:0 ' + Math.floor((sw - fw) / 2) + "px;"; } R.imgDom[idx] = img; img.width = fw; img.height = fh; img.style.cssText = style; if (R.isWeixin) { img.onclick = Picroll.showBtn; } } }; var Picroll = FCAPP.HOUSE.Picroll; $(document).ready(Picroll.init);