提交 c1f29310 编写于 作者: C Catouse

* added lightbox.

上级 3281973f
#lightboxImg {
width: inherit;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
padding: 0;
margin: 40px auto 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);
border: 6px solid #fff;
-webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1);
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1);
}
#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;
-webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1);
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1);
}
#lightboxModal.with-caption #lightboxImg:hover {
border-bottom-width: 40px;
}
因为 它太大了无法显示 source diff 。你可以改为 查看blob
此差异已折叠。
......@@ -53,6 +53,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -132,4 +133,4 @@
</section>
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -342,4 +343,4 @@
</div>
</section>
</article>
</body>
\ No newline at end of file
</body>
......@@ -51,6 +51,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -49,6 +49,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -54,6 +54,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -264,4 +265,4 @@
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -61,6 +61,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -1225,4 +1226,4 @@
</div>
</section>
</div>
</body>
\ No newline at end of file
</body>
......@@ -49,6 +49,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -67,6 +67,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -52,6 +52,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -64,6 +64,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -625,4 +626,4 @@
</section>
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -50,6 +50,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -175,4 +176,4 @@
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -52,6 +52,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -54,6 +54,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -80,6 +80,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -54,6 +54,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset='utf-8'>
<link href="../dist/css/zui.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/modal.js"></script>
<script src="../src/js/lightbox.js"></script>
<script>
$("[data-toggle=lightbox]").lightbox();
</script>
<link href="../assets/css/doc.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.js"></script>
<![endif]-->
<script src="../assets/js/doc.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ZUI</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="alerts.html">alerts</a></li>
<li><a href="article.html">article</a></li>
<li><a href="breadcrumb.html">breadcrumb</a></li>
<li><a href="button-groups.html">button-groups</a></li>
<li><a href="buttons.html">buttons</a></li>
<li><a href="cards.html">cards</a></li>
<li><a href="carousel.html">carousel</a></li>
<li><a href="chosen.html">chosen</a></li>
<li><a href="collapse.html">collapse</a></li>
<li><a href="comment.html">comment</a></li>
<li><a href="dropdowns.html">dropdowns</a></li>
<li><a href="forms.html">forms</a></li>
<li><a href="grid.html">grid</a></li>
<li><a href="icons.html">icons</a></li>
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
<li><a href="navbars.html">navbars</a></li>
<li><a href="navs.html">navs</a></li>
<li><a href="pager.html">pager</a></li>
<li><a href="panels.html">panels</a></li>
<li><a href="popovers.html">popovers</a></li>
<li><a href="progress.html">progress</a></li>
<li><a href="tables.html">tables</a></li>
<li><a href="tabs.html">tabs</a></li>
<li><a href="textbox.html">textbox</a></li>
<li><a href="tooltip.html">tooltip</a></li>
<li><a href="type.html">type</a></li>
</ul>
</li>
<li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
</ul>
</div>
</nav>
<article>
<section id='modals' class="page-section">
<h1>Lightbox</h1>
<h3>类型</h3>
<h4>基本类型</h4>
<div class="segment">
<a href="img/img2.jpg" title="这是lightbox的示例" data-toggle="lightbox"><img src="img/img1.png" alt=""></a>
</div>
</section>
</article>
</body>
</html>
......@@ -54,6 +54,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -484,4 +485,4 @@
</div>
</section>
</article>
</body>
\ No newline at end of file
</body>
......@@ -53,6 +53,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -403,4 +404,4 @@
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -63,6 +63,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -404,4 +405,4 @@
</section>
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -68,6 +68,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -56,6 +56,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -77,6 +77,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -366,4 +367,4 @@
</section>
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -50,6 +50,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -293,4 +294,4 @@
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -55,6 +55,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -54,6 +54,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......
......@@ -65,6 +65,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -278,4 +279,4 @@
</section>
</article>
</body>
</html>
\ No newline at end of file
</html>
......@@ -53,6 +53,7 @@
<li><a href="input-groups.html">input-groups</a></li>
<li><a href="kindeditor.html">kindeditor</a></li>
<li><a href="labels.html">labels</a></li>
<li><a href="lightbox.html">Lightbox</a></li>
<li><a href="list-group.html">list-group</a></li>
<li><a href="list.html">list</a></li>
<li><a href="modals.html">modals</a></li>
......@@ -197,4 +198,4 @@
</div>
</section>
</article>
</body>
\ No newline at end of file
</body>
(function($)
{
jQuery.fn.lightbox = function()
{
$(document).on('click', '[data-toggle="lightbox"]', function(){
// need modal
if (!$.fn.modal) throw new Error('modal requires for lightbox');
var $e = $(this);
// get image
var imgUrl = $e.attr('data-image') || $e.attr('src') || $e.attr('href')
|| $e.find('img').attr('src');
if(!imgUrl) return false;
// get caption
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');
var img = $('#lightboxImg');
var lightboxModal = $('#lightboxModal');
// 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();
// show modal
lightboxModal.modal();
return false;
});
};
})(jQuery);
......@@ -34,7 +34,6 @@
{
self.attr('data-safe-close',true)
}
}
Pager.prototype.showPopover = function()
......@@ -48,7 +47,6 @@
self.popover('show')
$(document).bind('click',$.proxy(this.hidePopover,this))
}
Pager.prototype.setContent = function (url)
......
......@@ -1695,3 +1695,44 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
})
}(window.jQuery);
// LIGHTBOX
(function($)
{
jQuery.fn.lightbox = function()
{
$(document).on('click', '[data-toggle="lightbox"]', function(){
// need modal
if (!$.fn.modal) throw new Error('modal requires for lightbox');
var $e = $(this);
// get image
var imgUrl = $e.attr('data-image') || $e.attr('src') || $e.attr('href')
|| $e.find('img').attr('src');
if(!imgUrl) return false;
// get caption
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');
var img = $('#lightboxImg');
var lightboxModal = $('#lightboxModal');
// 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();
// show modal
lightboxModal.modal();
return false;
});
};
})(jQuery);
#lightboxImg
{
width: inherit;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
padding: 0;
margin: 40px auto 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);
border: 6px solid #fff;
.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: #666;
font-weight: bold;
.transition(all,@animation-speed-fast,@animation-type);
}
#lightboxImg:hover
{
border-bottom-width: 40px;
}
}
......@@ -55,6 +55,7 @@
@import "modules/dropdowns.less";
@import "modules/carousel.less";
@import "modules/popovers.less";
@import "modules/lightbox.less";
//
// ASSETS
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册