Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
edadada0
Z
zui
项目概览
易企天创
/
zui
11 个月 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
edadada0
编写于
6月 21, 2014
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
+ updated lightbox.
上级
5d6e837a
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
416 addition
and
153 deletion
+416
-153
dist/css/zui.css
dist/css/zui.css
+1
-1
dist/js/zui.min.js
dist/js/zui.min.js
+235
-56
example/lightbox.html
example/lightbox.html
+4
-6
src/js/lightbox.js
src/js/lightbox.js
+134
-54
src/js/zui.js
src/js/zui.js
+1
-0
src/less/modules/lightbox.less
src/less/modules/lightbox.less
+41
-36
未找到文件。
dist/css/zui.css
浏览文件 @
edadada0
因为 它太大了无法显示 source diff 。你可以改为
查看blob
。
dist/js/zui.min.js
浏览文件 @
edadada0
...
...
@@ -18,6 +18,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "popover.js"
// @koala-append "pager.js"
// @koala-append "tab.js"
// @koala-append "image.ready.js"
// @koala-append "lightbox.js"
// @koala-append "droppable.js"
// @koala-append "dashboard.js"
...
...
@@ -1243,7 +1244,15 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
modal
.
addClass
(
'
modal-loading
'
).
toggleClass
(
'
fade
'
,
options
.
fade
);;
if
(
options
.
type
==
'
ajax
'
)
if
(
options
.
type
===
'
custom
'
&&
options
[
'
custom
'
])
{
options
[
'
custom
'
]({
modal
:
modal
,
options
:
options
,
element
:
$e
,
ready
:
function
()
{
ajustModalPosition
(
options
.
position
,
modal
.
find
(
'
.modal-dialog
'
));
modal
.
removeClass
(
'
modal-loading
'
);
}});
}
else
if
(
options
.
type
===
'
ajax
'
)
{
modal
.
load
(
options
.
url
,
function
()
{
...
...
@@ -1320,7 +1329,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
{
var
name
=
'
triggerModal
'
,
setting
=
this
.
options
;
var
loc
=
setting
.
location
;
if
(
$
(
name
).
length
)
if
(
$
(
'
#
'
+
name
).
length
)
{
/* unbind all events */
$
(
name
).
off
(
'
show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal
'
);
...
...
@@ -2200,79 +2209,249 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
}(
window
.
jQuery
);
(
function
(
$
)
/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @version 2011.05.27
* @author TangBin
* @see http://www.planeart.cn/?p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
* @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
*/
var
imgReady
=
(
function
()
{
var
list
=
[],
intervalId
=
null
,
// 用来执行队列
tick
=
function
()
{
var
i
=
0
;
for
(;
i
<
list
.
length
;
i
++
)
{
list
[
i
].
end
?
list
.
splice
(
i
--
,
1
)
:
list
[
i
]();
};
!
list
.
length
&&
stop
();
},
// 停止所有定时器队列
stop
=
function
()
{
clearInterval
(
intervalId
);
intervalId
=
null
;
};
return
function
(
url
,
ready
,
load
,
error
)
{
var
onready
,
width
,
height
,
newWidth
,
newHeight
,
img
=
new
Image
();
img
.
src
=
url
;
// 如果图片被缓存,则直接返回缓存数据
if
(
img
.
complete
)
{
ready
.
call
(
img
);
load
&&
load
.
call
(
img
);
return
;
};
width
=
img
.
width
;
height
=
img
.
height
;
// 加载错误后的事件
img
.
onerror
=
function
()
{
error
&&
error
.
call
(
img
);
onready
.
end
=
true
;
img
=
img
.
onload
=
img
.
onerror
=
null
;
};
// 图片尺寸就绪
onready
=
function
()
{
newWidth
=
img
.
width
;
newHeight
=
img
.
height
;
if
(
newWidth
!==
width
||
newHeight
!==
height
||
// 如果图片已经在其他地方加载可使用面积检测
newWidth
*
newHeight
>
1024
)
{
ready
.
call
(
img
);
onready
.
end
=
true
;
};
};
onready
();
// 完全加载完毕的事件
img
.
onload
=
function
()
{
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!
onready
.
end
&&
onready
();
load
&&
load
.
call
(
img
);
// IE gif动画会循环执行onload,置空onload即可
img
=
img
.
onload
=
img
.
onerror
=
null
;
};
// 加入队列中定期执行
if
(
!
onready
.
end
)
{
list
.
push
(
onready
);
// 无论何时只允许出现一个定时器,减少浏览器性能损耗
if
(
intervalId
===
null
)
intervalId
=
setInterval
(
tick
,
40
);
};
};
})();
/* Lightbox */
+
function
(
$
,
window
,
document
,
Math
)
{
jQuery
.
fn
.
lightbox
=
function
()
"
use strict
"
;
if
(
!
$
.
fn
.
modalTrigger
)
throw
new
Error
(
'
modal & modalTrigger requires for lightbox
'
);
if
(
!
imgReady
)
throw
new
Error
(
'
imgReady requires for lightbox
'
);
var
Lightbox
=
function
(
element
,
options
)
{
this
.
$
=
$
(
element
);
this
.
options
=
this
.
getOptions
(
options
);
this
.
init
();
};
Lightbox
.
DEFAULTS
=
{
var
lightboxId
=
0
;
$
(
"
[data-toggle='lightbox']
"
).
each
(
function
(){
$
(
this
).
attr
(
'
data-id
'
,
lightboxId
++
)});
modalTeamplate
:
'
<div class="icon-spinner icon-spin loader"></div><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img class="lightbox-img" src="{image}" alt="" data-dismiss="modal" /><div class="caption"><div class="content">{caption}<div></div></div>
'
};
// default options
$
(
this
).
click
(
function
()
Lightbox
.
prototype
.
getOptions
=
function
(
options
)
{
options
=
$
.
extend
({},
Lightbox
.
DEFAULTS
,
this
.
$
.
data
(),
options
);
if
(
!
options
[
'
image
'
])
{
// need modal
if
(
!
$
.
fn
.
modal
)
throw
new
Error
(
'
modal requires for lightbox
'
);
var
$e
=
$
(
this
);
options
[
'
image
'
]
=
this
.
$
.
attr
(
'
src
'
)
||
this
.
$
.
attr
(
'
href
'
)
||
this
.
$
.
find
(
'
img
'
).
attr
(
'
src
'
);
this
.
$
.
data
(
'
image
'
,
options
[
'
image
'
]);
}
return
options
;
};
// get image
var
imgUrl
=
$e
.
attr
(
'
data-image
'
)
||
$e
.
attr
(
'
src
'
)
||
$e
.
attr
(
'
href
'
)
||
$e
.
find
(
'
img
'
).
attr
(
'
src
'
);
if
(
!
imgUrl
)
return
false
;
Lightbox
.
prototype
.
init
=
function
()
{
this
.
bindEvents
(
);
}
// get caption
// var caption = $e.attr('data-caption') || $e.find('img').attr('title') || $e.attr('title');
Lightbox
.
prototype
.
initGroups
=
function
()
{
var
groups
=
this
.
$
.
data
(
'
groups
'
);
if
(
!
groups
)
{
groups
=
$
(
'
[data-toggle="lightbox"][data-group="
'
+
this
.
options
.
group
+
'
"], [data-lightbox-group="
'
+
this
.
options
.
group
+
'
"]
'
);
this
.
$
.
data
(
'
groups
'
,
groups
);
groups
.
each
(
function
(
index
)
{
$
(
this
).
attr
(
'
data-group-index
'
,
index
);
});
}
this
.
groups
=
groups
;
this
.
groupIndex
=
parseInt
(
this
.
$
.
data
(
'
group-index
'
));
}
// get lightbox modal
if
(
$
(
'
#lightboxModal
'
).
size
()
==
0
)
Lightbox
.
prototype
.
bindEvents
=
function
()
{
var
$e
=
this
.
$
,
that
=
this
;
var
options
=
this
.
options
;
if
(
!
options
.
image
)
return
false
;
$e
.
modalTrigger
(
{
type
:
'
custom
'
,
name
:
'
lightboxModal
'
,
custom
:
function
(
e
)
{
$
(
'
<div id="lightboxModal" class="modal fade modal-lightbox"><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img id="lightboxImg" src="#" alt="" data-dismiss="modal" /><div class="caption"></div></div></div>
'
).
appendTo
(
'
body
'
);
$
(
'
#lightboxModal .controller
'
).
click
(
function
()
that
.
initGroups
();
var
modal
=
e
.
modal
,
groups
=
that
.
groups
,
groupIndex
=
that
.
groupIndex
;
modal
.
addClass
(
'
modal-lightbox
'
)
.
html
(
options
.
modalTeamplate
.
format
(
options
))
.
toggleClass
(
'
lightbox-with-caption
'
,
typeof
options
.
caption
==
'
string
'
)
.
removeClass
(
'
lightbox-full
'
)
.
data
(
'
group-index
'
,
groupIndex
);
var
dialog
=
modal
.
find
(
'
.modal-dialog
'
),
winWidth
=
$
(
window
).
width
();
imgReady
(
options
.
image
,
function
()
{
var
id
=
parseInt
(
$
(
'
#lightboxModal
'
).
attr
(
'
data-id
'
))
+
(
$
(
this
).
hasClass
(
'
prev
'
)
?
-
1
:
1
);
var
e
=
$
(
'
[data-toggle="lightbox"][data-id="
'
+
id
+
'
"]
'
);
if
(
e
)
{
var
url
=
e
.
attr
(
'
data-image
'
)
||
e
.
attr
(
'
src
'
)
||
e
.
attr
(
'
href
'
)
||
e
.
find
(
'
img
'
).
attr
(
'
src
'
);
if
(
url
)
{
$
(
'
#lightboxImg
'
).
attr
(
'
src
'
,
url
);
$
(
'
#lightboxModal
'
).
attr
(
'
data-id
'
,
id
);
dialog
.
css
({
width
:
Math
.
min
(
winWidth
,
this
.
width
),
height
:
'
auto
'
});
if
(
winWidth
<
(
this
.
width
+
30
))
modal
.
addClass
(
'
lightbox-full
'
);
e
.
ready
();
});
$
(
'
#lightboxModal .controller
'
).
hide
();
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
-
1
)
+
'
"]
'
).
length
>
0
)
$
(
'
#lightboxModal .prev
'
).
show
();
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
+
1
)
+
'
"]
'
).
length
>
0
)
$
(
'
#lightboxModal .next
'
).
show
();
modal
.
find
(
'
.prev
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
groupIndex
-
1
)
+
'
"]
'
).
length
>
0
);
modal
.
find
(
'
.next
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
groupIndex
+
1
)
+
'
"]
'
).
length
>
0
);
$
(
'
#lightboxModal .modal-dialog
'
).
width
(
e
.
attr
(
'
data-width
'
)
||
'
auto
'
).
height
(
e
.
attr
(
'
data-height
'
)
||
'
auto
'
).
css
(
'
margin-top
'
,
Math
.
max
(
0
,
(
$
(
window
).
height
()
-
e
.
attr
(
'
data-height
'
))
/
2
));
}
modal
.
find
(
'
.controller
'
).
click
(
function
()
{
var
$this
=
$
(
this
);
var
id
=
modal
.
data
(
'
group-index
'
)
+
(
$this
.
hasClass
(
'
prev
'
)
?
-
1
:
1
);
var
$e
=
groups
.
filter
(
'
[data-group-index="
'
+
id
+
'
"]
'
);
if
(
$e
.
length
)
{
var
image
=
$e
.
data
(
'
image
'
),
caption
=
$e
.
data
(
'
caption
'
);
modal
.
addClass
(
'
modal-loading
'
)
.
data
(
'
group-index
'
,
id
)
.
toggleClass
(
'
lightbox-with-caption
'
,
typeof
caption
==
'
string
'
)
.
removeClass
(
'
lightbox-full
'
);
modal
.
find
(
'
.lightbox-img
'
).
attr
(
'
src
'
,
image
);
winWidth
=
$
(
window
).
width
();
imgReady
(
image
,
function
()
{
dialog
.
css
({
width
:
Math
.
min
(
winWidth
,
this
.
width
),
height
:
'
auto
'
});
if
(
winWidth
<
(
this
.
width
+
30
))
modal
.
addClass
(
'
lightbox-full
'
);
e
.
ready
();
});
}
modal
.
find
(
'
.prev
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
id
-
1
)
+
'
"]
'
).
length
>
0
);
modal
.
find
(
'
.next
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
id
+
1
)
+
'
"]
'
).
length
>
0
);
return
false
;
});
}
});
}
var
id
=
parseInt
(
$e
.
attr
(
'
data-id
'
));
var
img
=
$
(
'
#lightboxImg
'
);
var
lightboxModal
=
$
(
'
#lightboxModal
'
);
// set current id
lightboxModal
.
find
(
'
.controller
'
).
hide
();
lightboxModal
.
attr
(
'
data-id
'
,
id
);
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
-
1
)
+
'
"]
'
).
length
>
0
)
lightboxModal
.
find
(
'
.prev
'
).
show
();
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
+
1
)
+
'
"]
'
).
length
>
0
)
lightboxModal
.
find
(
'
.next
'
).
show
();
lightboxModal
.
find
(
'
.modal-dialog
'
).
width
(
$e
.
attr
(
'
data-width
'
)
||
'
auto
'
).
height
(
$e
.
attr
(
'
data-height
'
)
||
'
auto
'
).
css
(
'
margin-top
'
,
Math
.
max
(
0
,
(
$
(
window
).
height
()
-
$e
.
attr
(
'
data-height
'
))
/
2
));
$
.
fn
.
lightbox
=
function
(
option
)
{
var
defaultGroup
=
'
group
'
+
(
new
Date
()).
getTime
();
return
this
.
each
(
function
()
{
var
$this
=
$
(
this
);
// update modal content
img
.
attr
(
'
src
'
,
imgUrl
);
// if(caption && caption.length > 0) lightboxModal.addClass('with-caption').find('.caption').text(caption);
// else lightboxModal.find('.caption').remove();
var
options
=
typeof
option
==
'
object
'
&&
option
;
if
(
typeof
options
==
'
object
'
&&
options
.
group
)
{
$this
.
attr
(
'
data-lightbox-group
'
,
options
.
group
);
}
else
if
(
$this
.
data
(
'
group
'
))
{
$this
.
attr
(
'
data-lightbox-group
'
,
$this
.
data
(
'
group
'
));
}
else
{
$this
.
attr
(
'
data-lightbox-group
'
,
defaultGroup
);
}
$this
.
data
(
'
group
'
,
$this
.
data
(
'
lightbox-group
'
));
// show modal
lightboxModal
.
modal
(
);
var
data
=
$this
.
data
(
'
zui.lightbox
'
);
if
(
!
data
)
$this
.
data
(
'
zui.lightbox
'
,
(
data
=
new
Lightbox
(
this
,
options
))
);
return
false
;
})
;
if
(
typeof
option
==
'
string
'
)
data
[
option
]()
;
})
};
})(
jQuery
);
$
.
fn
.
lightbox
.
Constructor
=
Lightbox
;
$
(
function
()
{
$
(
'
[data-toggle="lightbox"]
'
).
lightbox
();
});
}(
jQuery
,
window
,
document
,
Math
);
/* Droppable */
...
...
example/lightbox.html
浏览文件 @
edadada0
...
...
@@ -6,12 +6,10 @@
<link
href=
"../assets/css/example.css"
rel=
"stylesheet"
>
<link
href=
"../dist/css/theme.css"
rel=
"stylesheet"
>
<script
src=
"../dist/js/jquery.js"
></script>
<script
src=
"../src/js/debug.js"
></script>
<script
src=
"../src/js/modal.js"
></script>
<script
src=
"../src/js/lightbox.js"
></script>
<script
src=
"../dist/js/zui.min.js"
></script>
<script>
$
(
function
()
{
$
(
"
[data-toggle='lightbox']
"
).
lightbox
();
//
$("[data-toggle='lightbox']").lightbox();
});
</script>
...
...
@@ -87,8 +85,8 @@
<h4>
基本类型
</h4>
<div
class=
"segment"
>
<a
href=
"img/img1.png"
title=
"这是lightbox的示例"
data-toggle=
"lightbox"
data-
width=
'1075'
data-height=
'554
'
><img
src=
"img/img1.png"
alt=
""
></a>
<a
href=
"img/img2.jpg"
title=
"这是lightbox的示例"
data-toggle=
"lightbox"
data-width=
'757'
data-height=
'571'
><img
src=
"img/img2.jpg"
alt=
""
></a>
<a
href=
"img/img1.png"
title=
"这是lightbox的示例"
data-toggle=
"lightbox"
data-
caption=
'fdsafsdafdsafsd
'
><img
src=
"img/img1.png"
alt=
""
></a>
<a
href=
"img/img2.jpg"
title=
"这是lightbox的示例"
data-toggle=
"lightbox"
><img
src=
"img/img2.jpg"
alt=
""
></a>
</div>
</section>
</article>
...
...
src/js/lightbox.js
浏览文件 @
edadada0
(
function
(
$
)
/* Lightbox */
+
function
(
$
,
window
,
document
,
Math
)
{
jQuery
.
fn
.
lightbox
=
function
()
"
use strict
"
;
if
(
!
$
.
fn
.
modalTrigger
)
throw
new
Error
(
'
modal & modalTrigger requires for lightbox
'
);
if
(
!
imgReady
)
throw
new
Error
(
'
imgReady requires for lightbox
'
);
var
Lightbox
=
function
(
element
,
options
)
{
var
lightboxId
=
0
;
$
(
"
[data-toggle='lightbox']
"
).
each
(
function
(){
$
(
this
).
attr
(
'
data-id
'
,
lightboxId
++
)}
);
this
.
$
=
$
(
element
)
;
this
.
options
=
this
.
getOptions
(
options
);
$
(
this
).
click
(
function
()
{
// need modal
if
(
!
$
.
fn
.
modal
)
throw
new
Error
(
'
modal requires for lightbox
'
);
this
.
init
();
};
var
$e
=
$
(
this
);
Lightbox
.
DEFAULTS
=
{
modalTeamplate
:
'
<div class="icon-spinner icon-spin loader"></div><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img class="lightbox-img" src="{image}" alt="" data-dismiss="modal" /><div class="caption"><div class="content">{caption}<div></div></div>
'
};
// default options
Lightbox
.
prototype
.
getOptions
=
function
(
options
)
{
options
=
$
.
extend
({},
Lightbox
.
DEFAULTS
,
this
.
$
.
data
(),
options
);
if
(
!
options
[
'
image
'
])
{
options
[
'
image
'
]
=
this
.
$
.
attr
(
'
src
'
)
||
this
.
$
.
attr
(
'
href
'
)
||
this
.
$
.
find
(
'
img
'
).
attr
(
'
src
'
);
this
.
$
.
data
(
'
image
'
,
options
[
'
image
'
]);
}
return
options
;
};
// get image
var
imgUrl
=
$e
.
attr
(
'
data-image
'
)
||
$e
.
attr
(
'
src
'
)
||
$e
.
attr
(
'
href
'
)
||
$e
.
find
(
'
img
'
).
attr
(
'
src
'
);
if
(
!
imgUrl
)
return
false
;
Lightbox
.
prototype
.
init
=
function
()
{
this
.
bindEvents
(
);
}
// get caption
// var caption = $e.attr('data-caption') || $e.find('img').attr('title') || $e.attr('title');
Lightbox
.
prototype
.
initGroups
=
function
()
{
var
groups
=
this
.
$
.
data
(
'
groups
'
);
if
(
!
groups
)
{
groups
=
$
(
'
[data-toggle="lightbox"][data-group="
'
+
this
.
options
.
group
+
'
"], [data-lightbox-group="
'
+
this
.
options
.
group
+
'
"]
'
);
this
.
$
.
data
(
'
groups
'
,
groups
);
groups
.
each
(
function
(
index
)
{
$
(
this
).
attr
(
'
data-group-index
'
,
index
);
});
}
this
.
groups
=
groups
;
this
.
groupIndex
=
parseInt
(
this
.
$
.
data
(
'
group-index
'
));
}
// get lightbox modal
if
(
$
(
'
#lightboxModal
'
).
size
()
==
0
)
Lightbox
.
prototype
.
bindEvents
=
function
()
{
var
$e
=
this
.
$
,
that
=
this
;
var
options
=
this
.
options
;
if
(
!
options
.
image
)
return
false
;
$e
.
modalTrigger
(
{
type
:
'
custom
'
,
name
:
'
lightboxModal
'
,
custom
:
function
(
e
)
{
$
(
'
<div id="lightboxModal" class="modal fade modal-lightbox"><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img id="lightboxImg" src="#" alt="" data-dismiss="modal" /><div class="caption"></div></div></div>
'
).
appendTo
(
'
body
'
);
$
(
'
#lightboxModal .controller
'
).
click
(
function
()
that
.
initGroups
();
var
modal
=
e
.
modal
,
groups
=
that
.
groups
,
groupIndex
=
that
.
groupIndex
;
modal
.
addClass
(
'
modal-lightbox
'
)
.
html
(
options
.
modalTeamplate
.
format
(
options
))
.
toggleClass
(
'
lightbox-with-caption
'
,
typeof
options
.
caption
==
'
string
'
)
.
removeClass
(
'
lightbox-full
'
)
.
data
(
'
group-index
'
,
groupIndex
);
var
dialog
=
modal
.
find
(
'
.modal-dialog
'
),
winWidth
=
$
(
window
).
width
();
imgReady
(
options
.
image
,
function
()
{
var
id
=
parseInt
(
$
(
'
#lightboxModal
'
).
attr
(
'
data-id
'
))
+
(
$
(
this
).
hasClass
(
'
prev
'
)
?
-
1
:
1
);
var
e
=
$
(
'
[data-toggle="lightbox"][data-id="
'
+
id
+
'
"]
'
);
if
(
e
)
{
var
url
=
e
.
attr
(
'
data-image
'
)
||
e
.
attr
(
'
src
'
)
||
e
.
attr
(
'
href
'
)
||
e
.
find
(
'
img
'
).
attr
(
'
src
'
);
if
(
url
)
{
$
(
'
#lightboxImg
'
).
attr
(
'
src
'
,
url
);
$
(
'
#lightboxModal
'
).
attr
(
'
data-id
'
,
id
);
dialog
.
css
({
width
:
Math
.
min
(
winWidth
,
this
.
width
),
height
:
'
auto
'
});
if
(
winWidth
<
(
this
.
width
+
30
))
modal
.
addClass
(
'
lightbox-full
'
);
e
.
ready
();
});
$
(
'
#lightboxModal .controller
'
).
hide
();
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
-
1
)
+
'
"]
'
).
length
>
0
)
$
(
'
#lightboxModal .prev
'
).
show
();
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
+
1
)
+
'
"]
'
).
length
>
0
)
$
(
'
#lightboxModal .next
'
).
show
();
modal
.
find
(
'
.prev
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
groupIndex
-
1
)
+
'
"]
'
).
length
>
0
);
modal
.
find
(
'
.next
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
groupIndex
+
1
)
+
'
"]
'
).
length
>
0
);
$
(
'
#lightboxModal .modal-dialog
'
).
width
(
e
.
attr
(
'
data-width
'
)
||
'
auto
'
).
height
(
e
.
attr
(
'
data-height
'
)
||
'
auto
'
).
css
(
'
margin-top
'
,
Math
.
max
(
0
,
(
$
(
window
).
height
()
-
e
.
attr
(
'
data-height
'
))
/
2
));
}
modal
.
find
(
'
.controller
'
).
click
(
function
()
{
var
$this
=
$
(
this
);
var
id
=
modal
.
data
(
'
group-index
'
)
+
(
$this
.
hasClass
(
'
prev
'
)
?
-
1
:
1
);
var
$e
=
groups
.
filter
(
'
[data-group-index="
'
+
id
+
'
"]
'
);
if
(
$e
.
length
)
{
var
image
=
$e
.
data
(
'
image
'
),
caption
=
$e
.
data
(
'
caption
'
);
modal
.
addClass
(
'
modal-loading
'
)
.
data
(
'
group-index
'
,
id
)
.
toggleClass
(
'
lightbox-with-caption
'
,
typeof
caption
==
'
string
'
)
.
removeClass
(
'
lightbox-full
'
);
modal
.
find
(
'
.lightbox-img
'
).
attr
(
'
src
'
,
image
);
winWidth
=
$
(
window
).
width
();
imgReady
(
image
,
function
()
{
dialog
.
css
({
width
:
Math
.
min
(
winWidth
,
this
.
width
),
height
:
'
auto
'
});
if
(
winWidth
<
(
this
.
width
+
30
))
modal
.
addClass
(
'
lightbox-full
'
);
e
.
ready
();
});
}
modal
.
find
(
'
.prev
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
id
-
1
)
+
'
"]
'
).
length
>
0
);
modal
.
find
(
'
.next
'
).
toggleClass
(
'
show
'
,
groups
.
filter
(
'
[data-group-index="
'
+
(
id
+
1
)
+
'
"]
'
).
length
>
0
);
return
false
;
});
}
});
}
var
id
=
parseInt
(
$e
.
attr
(
'
data-id
'
));
var
img
=
$
(
'
#lightboxImg
'
);
var
lightboxModal
=
$
(
'
#lightboxModal
'
);
// set current id
lightboxModal
.
find
(
'
.controller
'
).
hide
();
lightboxModal
.
attr
(
'
data-id
'
,
id
);
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
-
1
)
+
'
"]
'
).
length
>
0
)
lightboxModal
.
find
(
'
.prev
'
).
show
();
if
(
$
(
'
[data-toggle="lightbox"][data-id="
'
+
(
id
+
1
)
+
'
"]
'
).
length
>
0
)
lightboxModal
.
find
(
'
.next
'
).
show
();
lightboxModal
.
find
(
'
.modal-dialog
'
).
width
(
$e
.
attr
(
'
data-width
'
)
||
'
auto
'
).
height
(
$e
.
attr
(
'
data-height
'
)
||
'
auto
'
).
css
(
'
margin-top
'
,
Math
.
max
(
0
,
(
$
(
window
).
height
()
-
$e
.
attr
(
'
data-height
'
))
/
2
));
$
.
fn
.
lightbox
=
function
(
option
)
{
var
defaultGroup
=
'
group
'
+
(
new
Date
()).
getTime
();
return
this
.
each
(
function
()
{
var
$this
=
$
(
this
);
// update modal content
img
.
attr
(
'
src
'
,
imgUrl
);
// if(caption && caption.length > 0) lightboxModal.addClass('with-caption').find('.caption').text(caption);
// else lightboxModal.find('.caption').remove();
var
options
=
typeof
option
==
'
object
'
&&
option
;
if
(
typeof
options
==
'
object
'
&&
options
.
group
)
{
$this
.
attr
(
'
data-lightbox-group
'
,
options
.
group
);
}
else
if
(
$this
.
data
(
'
group
'
))
{
$this
.
attr
(
'
data-lightbox-group
'
,
$this
.
data
(
'
group
'
));
}
else
{
$this
.
attr
(
'
data-lightbox-group
'
,
defaultGroup
);
}
$this
.
data
(
'
group
'
,
$this
.
data
(
'
lightbox-group
'
));
// show modal
lightboxModal
.
modal
(
);
var
data
=
$this
.
data
(
'
zui.lightbox
'
);
if
(
!
data
)
$this
.
data
(
'
zui.lightbox
'
,
(
data
=
new
Lightbox
(
this
,
options
))
);
return
false
;
})
;
if
(
typeof
option
==
'
string
'
)
data
[
option
]()
;
})
};
})(
jQuery
);
$
.
fn
.
lightbox
.
Constructor
=
Lightbox
;
$
(
function
()
{
$
(
'
[data-toggle="lightbox"]
'
).
lightbox
();
});
}(
jQuery
,
window
,
document
,
Math
);
src/js/zui.js
浏览文件 @
edadada0
...
...
@@ -18,6 +18,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "popover.js"
// @koala-append "pager.js"
// @koala-append "tab.js"
// @koala-append "image.ready.js"
// @koala-append "lightbox.js"
// @koala-append "droppable.js"
// @koala-append "dashboard.js"
...
...
src/less/modules/lightbox.less
浏览文件 @
edadada0
#lightboxModal
.modal-lightbox
{
.modal-dialog
{
...
...
@@ -10,6 +10,7 @@
max-width: 100%;
max-height: 100%;
margin-bottom: 0;
.transition();
&:hover,
&:focus
...
...
@@ -25,7 +26,7 @@
.opacity(.9);
> .icon
{
box-shadow:1px 1px 16px rgba(0, 0, 0,
0
.5);
box-shadow:1px 1px 16px rgba(0, 0, 0, .5);
}
}
}
...
...
@@ -35,7 +36,6 @@
{
display: block;
font-size: 14px;
line-height: 14px;
text-align: center;
width: 30px;
height: 30px;
...
...
@@ -44,30 +44,33 @@
right: -13px;
top: -15px;
color: #fff;
border:
2
px solid #fff;
border:
1
px solid #fff;
-webkit-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
.opacity(.9);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0,
0
.5);
box-shadow: 0 5px 5px rgba(0, 0, 0,
0
.5);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
}
&.lightbox-full .close {right: 10px; top: 10px;}
.controller
{
display:
block
;
display:
none
;
height: 100%;
line-height: 100%;
top: 0;
position: absolute;
cursor: pointer;
font-size: 30px;
padding: 10px 20px;
color: #fff;
background:none;
border: none;
.opacity(0.05);
transition:all 0.4s;
.opacity(.05);
.transition();
&.show {display: block}
> .icon
{
...
...
@@ -80,6 +83,8 @@
height: 50px;
line-height: 50px;
border: 2px solid #fff;
&:before {font-size: 28px;}
}
&:hover
...
...
@@ -97,8 +102,30 @@
right: 0;
}
}
.caption {display: none}
&.lightbox-with-caption
{
.caption
{
display: block;
position: absolute;
width: 100%;
bottom: 0;
padding: 10px 15px;
color: #fff;
background: rgba(0, 0, 0, .15);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
opacity: .5;
text-align: center;
.transition();
}
.modal-dialog:hover .caption {opacity: 1; background: rgba(0, 0, 0, .6);}
}
}
#lightboxI
mg
.lightbox-i
mg
{
width: inherit;
height: auto;
...
...
@@ -107,30 +134,8 @@
display: block;
padding: 0;
margin: 0 auto;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0,
0
.5);
box-shadow: 0 5px 15px rgba(0, 0, 0,
0
.5);
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
cursor: pointer;
.transition(
all,@animation-speed-normal,@animation-type
);
.transition();
}
// #lightboxModal.with-caption
// {
// .caption
// {
// position: relative;
// text-align: center;
// margin-top: -30px;
// font-size: 12px;
// white-space: nowrap;
// z-index: 10010;
// color: #777;
// font-weight: bold;
// text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
// .transition(all,@animation-speed-normal,@animation-type);
// }
// #lightboxImg:hover
// {
// border-bottom-width: 40px;
// }
// }
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录