Skip to content

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

图片翻页

parent 63b04789
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 51 deletions
application/app_broker/view/index/timeline_pc.html
View file @ af731588
......@@ -80,8 +80,17 @@
<ol v-if="item.step_name==='pay_log'" class="li-img-list">
<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>
<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>
<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>
......@@ -110,17 +119,17 @@
<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">
<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>
</ol>
<ol v-if="item.step_name==='follow_up_log'" class="li-img-list">
<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>
</ol>
<ol v-if="item.step_name==='refund_check' && item.status*1 == 2" class="li-img-list">
<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>
</ol>
<p v-if="item.step_name==='march_in'" class="li-caozuoren">操作人：<span>{{item.reception_name}}</span></p>
......@@ -135,7 +144,7 @@
<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">
<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>
</ol>
</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
e.preventDefault();
e.stopPropagation();
var _$this = $(this);
var _img = _$this.find('img').attr('src');
console.log(_img);
$('body', parent.document).append('<img class="J_preview" id="preview_big_img_div" src="'+_img+'" />');
window.parent.document.getElementById('preview_big_img_div').click();//巧妙调用父页面的方法
var _index = _$this.parent().index();
var _tempNodeItem = window.parent.document.getElementById('preview_big_img_ol');
if(_tempNodeItem){
_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: {
......
public/resource/lib/js/jquery-photo-gallery/jquery.photo.gallery.js
View file @ af731588
......@@ -79,23 +79,13 @@ $.fn.extend({
$prev.on('click',function(){
if(o.activeIndex > 0) o.activeIndex--;
toggleImage();
}).on("mouseover",function(e){
if(o.activeIndex > 0)
$(this).addClass("active");
}).on("mouseout",function(e){
$(this).removeClass("active");
});
});
//下一张
$next.on('click',function(){
if(o.activeIndex < o.imgs.length -1) o.activeIndex++;
toggleImage();
}).on("mouseover",function(e){
if(o.activeIndex < o.imgs.length -1)
$(this).addClass("active");
}).on("mouseout",function(e){
$(this).removeClass("active");
});
});
//缩略图
$thumbnails.css({
......@@ -340,7 +330,7 @@ $.fn.extend({
function init(){
toggleImage();
console.log(o);
$(o.imgs).each(function(i, img){
$(o.template.IMAGE)
.appendTo($gallery)
......@@ -351,11 +341,7 @@ $.fn.extend({
height : img.imgHeight,
left : (cW - img.imgWidth)/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");
}
......@@ -545,7 +531,6 @@ $.fn.extend({
$.extend({
//打开图片查看器
openPhotoGallery : function(obj){
var $img = $(obj),
imgUrl = $img[0].src;
if(!imgUrl) return;
......@@ -558,18 +543,69 @@ $.extend({
wH = 415,
wW = 615;
if(imgWidth>1000){
imgWidth = 1000;
imgHeight = 1000/ratio;
}
var imgs = [{
url: imgUrl,
imgHeight : imgHeight,
imgWidth : imgWidth
}];
console.log(imgs);
var $gallerys = $(obj).closest(".modal-body"),
activeIndex=0;
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
});
});
localStorage["photoGalleryImgs"] = JSON.stringify(imgs); //因为此字符串可能是base64字符，appgo无法传
localStorage["photoGalleryActiveIndex"] = activeIndex;
$("#J_pg").remove();
$("<iframe></iframe").appendTo("body")
......@@ -590,7 +626,7 @@ $.extend({
//做初始化
initGallery : function(){
var activeIndex = 0,
var activeIndex = localStorage["photoGalleryActiveIndex"],
imgs = JSON.parse(localStorage["photoGalleryImgs"]);
localStorage.removeItem("photoGalleryActiveIndex");
......@@ -607,13 +643,14 @@ $.extend({
$(_jg).remove();
});
$('.oper').attr('title', '双击图片关闭，或者右上角关闭，滚动鼠标可放大').dblclick(function(e){
if(e.target.tagName !== 'IMG'){
var _parent = window.parent || window.top,
_jg = _parent.document.getElementById("J_pg");
$(_jg).remove();
}
});
$('.oper').attr('title', '右上角可关闭，滚动鼠标可放大');
// $('.oper').attr('title', '双击图片关闭，或者右上角关闭，滚动鼠标可放大').dblclick(function(e){
// if(e.target.tagName !== 'IMG'){
// var _parent = window.parent || window.top,
// _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{
right: 0;
bottom: 0;
}
.gallery .oper{
/*.gallery .oper{
position: absolute;
top: 0;
bottom: 0;
......@@ -227,9 +227,19 @@ i{
left: 0;
margin: 62px 0 0;
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{
display: none;
/*display: none;*/
cursor: pointer;
}
.gallery .oper span{
......@@ -239,12 +249,12 @@ i{
.gallery .oper .prev{
float:left;
margin-left: 9px;
display: none;
/*display: none;*/
}
.gallery .oper .next{
float:right;
margin-right: 9px;
display: none;
/*display: none;*/
}
.gallery .oper .prev.active i, .gallery .oper .next.active i{
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