Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
c637a1e3
Z
zui
项目概览
易企天创
/
zui
12 个月 前同步成功
通知
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,发现更多精彩内容 >>
提交
c637a1e3
编写于
1月 07, 2014
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* ajusted style of lightbox.
上级
cf935add
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
170 addition
and
34 deletion
+170
-34
examples/lightbox.html
examples/lightbox.html
+3
-6
src/js/lightbox.js
src/js/lightbox.js
+43
-6
src/less/modules/lightbox.less
src/less/modules/lightbox.less
+124
-22
未找到文件。
examples/lightbox.html
浏览文件 @
c637a1e3
...
...
@@ -4,17 +4,13 @@
<meta
charset=
'utf-8'
>
<link
href=
"../dist/css/zui.chanzhi.css"
rel=
"stylesheet"
>
<link
href=
"../assets/css/doc.css"
rel=
"stylesheet"
>
<link
rel=
"stylesheet/less"
type=
"text/css"
href=
"../src/less/zui.less"
/>
<script
type=
"text/javascript"
>
less
=
{
env
:
"
development
"
,
dumpLineNumbers
:
'
mediaquery
'
};
</script>
<script
src=
"../assets/js/less.js"
></script>
<script
src=
"../assets/js/jquery.js"
></script>
<script
src=
"../dist/js/zui.min.js"
></script>
<script
src=
"../src/js/debug.js"
></script>
<script
src=
"../src/js/modal.js"
></script>
<script
src=
"../src/js/lightbox.js"
></script>
<script>
$
(
function
()
{
$
(
"
*
[data-toggle='lightbox']
"
).
lightbox
();
$
(
"
[data-toggle='lightbox']
"
).
lightbox
();
});
</script>
...
...
@@ -88,7 +84,8 @@
<h4>
基本类型
</h4>
<div
class=
"segment"
>
<a
href=
"img/img2.jpg"
title=
"这是lightbox的示例"
data-toggle=
"lightbox"
><img
src=
"img/img1.png"
alt=
""
></a>
<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>
</div>
</section>
</article>
...
...
src/js/lightbox.js
浏览文件 @
c637a1e3
...
...
@@ -2,7 +2,11 @@
{
jQuery
.
fn
.
lightbox
=
function
()
{
$
(
this
).
click
(
function
(){
var
lightboxId
=
0
;
$
(
"
[data-toggle='lightbox']
"
).
each
(
function
(){
$
(
this
).
attr
(
'
data-id
'
,
lightboxId
++
)});
$
(
this
).
click
(
function
()
{
// need modal
if
(
!
$
.
fn
.
modal
)
throw
new
Error
(
'
modal requires for lightbox
'
);
...
...
@@ -14,18 +18,51 @@
if
(
!
imgUrl
)
return
false
;
// get caption
var
caption
=
$e
.
attr
(
'
data-caption
'
)
||
$e
.
find
(
'
img
'
).
attr
(
'
title
'
)
||
$e
.
attr
(
'
title
'
);
//
var caption = $e.attr('data-caption') || $e.find('img').attr('title') || $e.attr('title');
// get lightbox modal
if
(
$
(
'
#lightboxModal
'
).
size
()
==
0
)
$
(
'
<div id="lightboxModal" class="modal fade modal-lightbox"><img class="modal-dialog" id="lightboxImg" src="#" alt="" data-dismiss="modal" /><div class="caption"></div></div>
'
).
appendTo
(
'
body
'
);
{
$
(
'
<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
()
{
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
);
$
(
'
#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
();
$
(
'
#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
));
}
}
});
}
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
));
// update modal content
img
.
attr
(
'
alt
'
,
caption
).
attr
(
'
src
'
,
imgUrl
);
if
(
caption
&&
caption
.
length
>
0
)
lightboxModal
.
addClass
(
'
with-caption
'
).
find
(
'
.caption
'
).
text
(
caption
);
else
lightboxModal
.
find
(
'
.caption
'
).
remove
();
img
.
attr
(
'
src
'
,
imgUrl
);
//
if(caption && caption.length > 0) lightboxModal.addClass('with-caption').find('.caption').text(caption);
//
else lightboxModal.find('.caption').remove();
// show modal
lightboxModal
.
modal
();
...
...
src/less/modules/lightbox.less
浏览文件 @
c637a1e3
#lightboxModal
{
.modal-dialog
{
border: none;
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
background: none;
max-width: 100%;
max-height: 100%;
margin-bottom: 0;
&:hover,
&:focus
{
.close
{
.opacity(1);
}
.controller
{
outline: none;
.opacity(.9);
> .icon
{
box-shadow:1px 1px 16px rgba(0, 0, 0, 0.5);
}
}
}
}
.close
{
display: block;
font-size: 14px;
line-height: 14px;
text-align: center;
width: 30px;
height: 30px;
background-color: #333;
position: absolute;
right: -13px;
top: -15px;
color: #fff;
border: 2px 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);
}
.controller
{
display: block;
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;
> .icon
{
display: inline-block;
-webkit-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
background-color: #333;
width: 50px;
height: 50px;
line-height: 50px;
border: 2px solid #fff;
}
&:hover
{
.opacity(1);
}
&.prev
{
left: 0;
}
&.next
{
right: 0;
}
}
}
#lightboxImg
{
width: inherit;
...
...
@@ -6,30 +106,32 @@
max-height: 100%;
display: block;
padding: 0;
margin: 40px auto 0 auto;
margin: 0 auto;
border: 6px solid #fff;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
border: 6px solid #fff
;
.transition(all,@animation-speed-
fast
,@animation-type);
cursor: pointer
;
.transition(all,@animation-speed-
normal
,@animation-type);
}
#lightboxModal.with-caption
{
.caption
{
position: relative;
text-align: center;
margin-top: -30px;
font-size: 12px;
white-space: nowrap;
z-index: 10010;
color: #666;
font-weight: bold;
.transition(all,@animation-speed-fast,@animation-type);
}
// #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;
}
}
//
#lightboxImg:hover
//
{
//
border-bottom-width: 40px;
//
}
//
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录