Skip to content

T
tl_estate
Commit af731588 authored by xishifeng's avatar xishifeng
Browse files
Options

图片翻页

parent 63b04789
Show whitespace changes
Inline Side-by-side
Showing with 108 additions and 47 deletions
application/app_broker/view/index/timeline_pc.html
View file @ af731588
...@@ -80,8 +80,17 @@ ...@@ -80,8 +80,17 @@
<ol v-if="item.step_name==='pay_log'" class="li-img-list"> <ol v-if="item.step_name==='pay_log'" class="li-img-list">
<li v-for="(item2, idnex2) in item.img"> <li v-for="(item2, idnex2) in item.img">
<a href="javascript:;" class="click-big-img-a"><img :src="item.img_path+item2.img_name"></a> <a href="javascript:;" class="click-big-img-a"><img class="J_preview" :src="item.img_path+item2.img_name"></a>
</li> </li>
<!--<li>
<a href="javascript:;" class="click-big-img-a"><img class="J_preview" src="https://pre2.tonglianjituan.com/static/chat_image/20190114/201901141550135536.jpg"></a>
</li>
<li>
<a href="javascript:;" class="click-big-img-a"><img class="J_preview" src="https://pre2.tonglianjituan.com/static/chat_image/20190114/20190114155013553693.jpg"></a>
</li>
<li>
<a href="javascript:;" class="click-big-img-a"><img class="J_preview" src="https://pre2.tonglianjituan.com/static/chat_image/20190114/201901141550135536932722.jpg"></a>
</li>-->
</ol> </ol>
<p v-if="item.step_name==='refund'">退款ID：<span class="span-active">{{item.id}}</span></p> <p v-if="item.step_name==='refund'">退款ID：<span class="span-active">{{item.id}}</span></p>
<p v-if="item.step_name==='refund'">要退金额的收款ID：<span class="span-active">{{item.pay_log_id}}</span></p> <p v-if="item.step_name==='refund'">要退金额的收款ID：<span class="span-active">{{item.pay_log_id}}</span></p>
...@@ -110,17 +119,17 @@ ...@@ -110,17 +119,17 @@
<p v-if="item.step_name==='march_in'">地址：{{item.march_in_area}}</p> <p v-if="item.step_name==='march_in'">地址：{{item.march_in_area}}</p>
<ol v-if="item.step_name==='march_in'" class="li-img-list"> <ol v-if="item.step_name==='march_in'" class="li-img-list">
<li v-for="(item2, idnex2) in item.img"> <li v-for="(item2, idnex2) in item.img">
<a href="javascript:;" class="click-big-img-a"><img :src="item.img_path+item2.img_name"></a> <a href="javascript:;" class="click-big-img-a"><img class="J_preview" :src="item.img_path+item2.img_name"></a>
</li> </li>
</ol> </ol>
<ol v-if="item.step_name==='follow_up_log'" class="li-img-list"> <ol v-if="item.step_name==='follow_up_log'" class="li-img-list">
<li> <li>
<a href="javascript:;" class="click-big-img-a"><img :src="item.img_path+item.explain_img"></a> <a href="javascript:;" class="click-big-img-a"><img class="J_preview" :src="item.img_path+item.explain_img"></a>
</li> </li>
</ol> </ol>
<ol v-if="item.step_name==='refund_check' && item.status*1 == 2" class="li-img-list"> <ol v-if="item.step_name==='refund_check' && item.status*1 == 2" class="li-img-list">
<li v-for="(item2, idnex2) in item.img"> <li v-for="(item2, idnex2) in item.img">
<a href="javascript:;" class="click-big-img-a"><img :src="item.img_path+item2.img_name"></a> <a href="javascript:;" class="click-big-img-a"><img class="J_preview" :src="item.img_path+item2.img_name"></a>
</li> </li>
</ol> </ol>
<p v-if="item.step_name==='march_in'" class="li-caozuoren">操作人：<span>{{item.reception_name}}</span></p> <p v-if="item.step_name==='march_in'" class="li-caozuoren">操作人：<span>{{item.reception_name}}</span></p>
...@@ -135,7 +144,7 @@ ...@@ -135,7 +144,7 @@
<p v-if="item.step_name==='refund_check' && item.status*1 == 2">操作人：<span>{{item.operation_name}}</span></p> <p v-if="item.step_name==='refund_check' && item.status*1 == 2">操作人：<span>{{item.operation_name}}</span></p>
<ol v-if="item.step_name==='refund'" class="li-img-list"> <ol v-if="item.step_name==='refund'" class="li-img-list">
<li v-for="(item2, idnex2) in item.img"> <li v-for="(item2, idnex2) in item.img">
<a href="javascript:;" class="click-big-img-a"><img :src="item.img_path+item2.img_name"></a> <a href="javascript:;" class="click-big-img-a"><img class="J_preview" :src="item.img_path+item2.img_name"></a>
</li> </li>
</ol> </ol>
</div> </div>
......
public/app/js/timeline_pc.js
View file @ af731588
...@@ -45,10 +45,15 @@ require(['vue', 'css!style/timeline_pc.css', 'jquery0325', 'common'],function(Vu ...@@ -45,10 +45,15 @@ require(['vue', 'css!style/timeline_pc.css', 'jquery0325', 'common'],function(Vu
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
var _$this = $(this); var _$this = $(this);
var _img = _$this.find('img').attr('src'); var _index = _$this.parent().index();
console.log(_img); var _tempNodeItem = window.parent.document.getElementById('preview_big_img_ol');
$('body', parent.document).append('<img class="J_preview" id="preview_big_img_div" src="'+_img+'" />'); if(_tempNodeItem){
window.parent.document.getElementById('preview_big_img_div').click();//巧妙调用父页面的方法 _tempNodeItem.innerHTML = _$this.closest('.li-img-list').html();
}else{
$('body', parent.document).append('<ol id="preview_big_img_ol" style="display: none;">'+_$this.closest('.li-img-list').html()+'</ol>');
}
$(window.parent.document.getElementById('preview_big_img_ol')).find('.J_preview')[_index].click();//巧妙调用父页面的方法
}) })
}, },
methods: { methods: {
......
public/resource/lib/js/jquery-photo-gallery/jquery.photo.gallery.js
View file @ af731588
...@@ -79,22 +79,12 @@ $.fn.extend({ ...@@ -79,22 +79,12 @@ $.fn.extend({
$prev.on('click',function(){ $prev.on('click',function(){
if(o.activeIndex > 0) o.activeIndex--; if(o.activeIndex > 0) o.activeIndex--;
toggleImage(); toggleImage();
}).on("mouseover",function(e){
if(o.activeIndex > 0)
$(this).addClass("active");
}).on("mouseout",function(e){
$(this).removeClass("active");
}); });
//下一张 //下一张
$next.on('click',function(){ $next.on('click',function(){
if(o.activeIndex < o.imgs.length -1) o.activeIndex++; if(o.activeIndex < o.imgs.length -1) o.activeIndex++;
toggleImage(); toggleImage();
}).on("mouseover",function(e){
if(o.activeIndex < o.imgs.length -1)
$(this).addClass("active");
}).on("mouseout",function(e){
$(this).removeClass("active");
}); });
//缩略图 //缩略图
...@@ -340,7 +330,7 @@ $.fn.extend({ ...@@ -340,7 +330,7 @@ $.fn.extend({
function init(){ function init(){
toggleImage(); toggleImage();
console.log(o);
$(o.imgs).each(function(i, img){ $(o.imgs).each(function(i, img){
$(o.template.IMAGE) $(o.template.IMAGE)
.appendTo($gallery) .appendTo($gallery)
...@@ -351,11 +341,7 @@ $.fn.extend({ ...@@ -351,11 +341,7 @@ $.fn.extend({
height : img.imgHeight, height : img.imgHeight,
left : (cW - img.imgWidth)/2, left : (cW - img.imgWidth)/2,
top: (cH - img.imgHeight)/2 top: (cH - img.imgHeight)/2
}).on("dblclick", function(){ });
var _parent = window.parent || window.top,
_jg = _parent.document.getElementById("J_pg");
$(_jg).remove();
}); ;
}); });
$image = $(".image[index='"+o.activeIndex+"']", $gallery).addClass("active"); $image = $(".image[index='"+o.activeIndex+"']", $gallery).addClass("active");
} }
...@@ -545,7 +531,6 @@ $.fn.extend({ ...@@ -545,7 +531,6 @@ $.fn.extend({
$.extend({ $.extend({
//打开图片查看器 //打开图片查看器
openPhotoGallery : function(obj){ openPhotoGallery : function(obj){
var $img = $(obj), var $img = $(obj),
imgUrl = $img[0].src; imgUrl = $img[0].src;
if(!imgUrl) return; if(!imgUrl) return;
...@@ -558,18 +543,69 @@ $.extend({ ...@@ -558,18 +543,69 @@ $.extend({
wH = 415, wH = 415,
wW = 615; wW = 615;
if(imgWidth>1000){ var $gallerys = $(obj).closest(".modal-body"),
imgWidth = 1000; activeIndex=0;
imgHeight = 1000/ratio; var imgs = [];
var _tempImgList = $gallerys.find(".J_preview");
if(_tempImgList.length == 0){
$gallerys = $(obj).closest("#preview_big_img_ol");
_tempImgList = $gallerys.find(".J_preview");
};
_tempImgList.each(function(i, elem){
var url = this.src,
img = $(this)[0],
nH = img.naturalHeight,
nW = img.naturalWidth,
ratio = nW / nH,
w = nW,
h = nH;
if(url == imgUrl){
activeIndex = i;
w = imgWidth;
h = imgHeight;
}else{
if(nW > wW) {
w = wW;
nH = h = Math.ceil(w / ratio);
if( h > wH){
nH = h = wH;
w = Math.ceil(h * ratio);
} }
}
if(nH > wH) {
h = wH;
w = Math.ceil(h * ratio);
if( w > wW){
w = wW;
h = Math.ceil(w / ratio);
}
}
}
if(w>1000){
w = 1000;
h = 1000/ratio;
};
if(h>800){
h = 800;
w = h*ratio;
};
imgs.push({
url: url,
imgHeight : h,
imgWidth : w
});
});
var imgs = [{
url: imgUrl,
imgHeight : imgHeight,
imgWidth : imgWidth
}];
console.log(imgs);
localStorage["photoGalleryImgs"] = JSON.stringify(imgs); //因为此字符串可能是base64字符，appgo无法传 localStorage["photoGalleryImgs"] = JSON.stringify(imgs); //因为此字符串可能是base64字符，appgo无法传
localStorage["photoGalleryActiveIndex"] = activeIndex;
$("#J_pg").remove(); $("#J_pg").remove();
$("<iframe></iframe").appendTo("body") $("<iframe></iframe").appendTo("body")
...@@ -590,7 +626,7 @@ $.extend({ ...@@ -590,7 +626,7 @@ $.extend({
//做初始化 //做初始化
initGallery : function(){ initGallery : function(){
var activeIndex = 0, var activeIndex = localStorage["photoGalleryActiveIndex"],
imgs = JSON.parse(localStorage["photoGalleryImgs"]); imgs = JSON.parse(localStorage["photoGalleryImgs"]);
localStorage.removeItem("photoGalleryActiveIndex"); localStorage.removeItem("photoGalleryActiveIndex");
...@@ -607,13 +643,14 @@ $.extend({ ...@@ -607,13 +643,14 @@ $.extend({
$(_jg).remove(); $(_jg).remove();
}); });
$('.oper').attr('title', '双击图片关闭，或者右上角关闭，滚动鼠标可放大').dblclick(function(e){ $('.oper').attr('title', '右上角可关闭，滚动鼠标可放大');
if(e.target.tagName !== 'IMG'){ // $('.oper').attr('title', '双击图片关闭，或者右上角关闭，滚动鼠标可放大').dblclick(function(e){
var _parent = window.parent || window.top, // if(e.target.tagName !== 'IMG'){
_jg = _parent.document.getElementById("J_pg"); // var _parent = window.parent || window.top,
$(_jg).remove(); // _jg = _parent.document.getElementById("J_pg");
} // $(_jg).remove();
}); // }
// });
} }
}); });
......
public/resource/lib/js/jquery-photo-gallery/photoGallery.css
View file @ af731588
...@@ -219,7 +219,7 @@ i{ ...@@ -219,7 +219,7 @@ i{
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.gallery .oper{ /*.gallery .oper{
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
...@@ -227,9 +227,19 @@ i{ ...@@ -227,9 +227,19 @@ i{
left: 0; left: 0;
margin: 62px 0 0; margin: 62px 0 0;
z-index: 99999; z-index: 99999;
}*/
.gallery .oper{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
height: 38px;
z-index: 99999;
} }
.gallery .oper i{ .gallery .oper i{
display: none; /*display: none;*/
cursor: pointer; cursor: pointer;
} }
.gallery .oper span{ .gallery .oper span{
...@@ -239,12 +249,12 @@ i{ ...@@ -239,12 +249,12 @@ i{
.gallery .oper .prev{ .gallery .oper .prev{
float:left; float:left;
margin-left: 9px; margin-left: 9px;
display: none; /*display: none;*/
} }
.gallery .oper .next{ .gallery .oper .next{
float:right; float:right;
margin-right: 9px; margin-right: 9px;
display: none; /*display: none;*/
} }
.gallery .oper .prev.active i, .gallery .oper .next.active i{ .gallery .oper .prev.active i, .gallery .oper .next.active i{
display: inline-block; display: inline-block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment