github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

加强 layer photos 层底部栏

pull/1120/head
贤心 2022-08-19 02:44:43 +08:00
parent e8f6b29afe
commit 3b3794dfb4
2 changed files with 26 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/modules/layer.css
View File

@ -157,10 +157,10 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
.layui-layer-imgnext:hover{color: #959595;}
.layui-layer-imgbar{position: fixed; left:0; right: 0; bottom:0; width:100%; height: 40px; line-height: 40px; background-color:#000\9; filter:Alpha(opacity=60); background-color: rgba(2,0,0,.35); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
.layui-layer-imgtit{/*position:absolute; left:20px;*/}
.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;}
.layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;}
.layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;}
.layui-layer-imgtit em{padding-left:10px; font-style: normal;}
.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; padding: 0 5px; font-size:12px; color: #fff;}
.layui-layer-imgtit h3{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-weight: 300;}
.layui-layer-imgtit a:hover{color: #fff; text-decoration: underline;}
.layui-layer-imgtit em{font-style: normal;}
/* 关闭动画 */
@-webkit-keyframes layer-bounceOut {

49
src/modules/layer.js
View File

@ -1412,7 +1412,7 @@ layer.photos = function(options, loop, key){
loadImage(data[start].src, function(img){
layer.close(dict.loadi);
var alt = data[start].alt||'';
var alt = data[start].alt || '';
//切换图片时不出现动画
if(key) options.anim = -1;
@ -1451,36 +1451,31 @@ layer.photos = function(options, loop, key){
isOutAnim: false,
skin: 'layui-layer-photos' + skin('photos'),
content: '<div class="layui-layer-phimg">'
+'<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ data[start].pid +'">'
+function(){
var tip = '<div class="layui-layer-imgsee">';
+ '<img src="'+ data[start].src +'" alt="'+ alt +'" layer-pid="'+ data[start].pid +'">'
+ function(){
var arr = ['<div class="layui-layer-imgsee">'];
// 左右箭头翻页
if(data.length > 1){
tip += '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>';
arr.push(['<div class="layui-layer-imguide">'
,'<span class="layui-icon layui-icon-left layui-layer-iconext layui-layer-imgprev"></span>'
,'<span class="layui-icon layui-icon-right layui-layer-iconext layui-layer-imgnext"></span>'
,'</div>'].join(''));
}
if(alt===''){
tip += '<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><em>'+ dict.imgIndex +' / '+ data.length +'</em><a href="'+data[start].src+'" target="_blank">查看原图</a></span></div>';
}
else{
tip += '<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><span>'+ alt +'</span><em>'+ dict.imgIndex +' / '+ data.length +'</em><a href="'+data[start].src+'" target="_blank">查看原图</a></span></div>';
}
// 底部栏
if(!options.hideFooter){
arr.push(['<div class="layui-layer-imgbar">'
,'<div class="layui-layer-imgtit">'
,'<h3>'+ alt +'</h3>'
,'<em>'+ dict.imgIndex +' / '+ data.length +'</em>'
,'<a href="'+ data[start].src +'" target="_blank">查看原图</a>'
,'</div>'
,'</div>'].join(''));
}
tip += '</div>';
}
else if(data.length === 1){
if(alt===''){
tip = '<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="'+data[start].src+'" target="_blank">查看原图</a></span></div>';
}
else{
tip += '<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><span>'+ alt +'</span><a href="'+data[start].src+'" target="_blank">查看原图</a></span></div>';
tip += '</div>';
}
}
else{
tip = '';
}
return tip;
arr.push('</div>');
return arr.join('');
}()
+'</div>',
success: function(layero, index){