previews lightbox
This commit is contained in:
Matt Claypotch
Родитель
5a9a2acc33
Коммит
509cf5a602
|
|
@ -129,3 +129,17 @@
|
|||
_('Ask the Author a Question')) }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block staging %}
|
||||
<div id="lightbox">
|
||||
<section>
|
||||
<div class="content"></div>
|
||||
<div class="controls">
|
||||
<a href="#" class="control next">»</a>
|
||||
<a href="#" class="control prev">«</a>
|
||||
<span class="caption"></span>
|
||||
</div>
|
||||
<a class="close" href="#">x</a>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -665,6 +665,85 @@ a.listview:before {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* LIGHTBOX */
|
||||
/************************************/
|
||||
|
||||
#lightbox {
|
||||
background: rgba(0,0,0,.9);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 101%;
|
||||
display: none;
|
||||
z-index: 9000;
|
||||
color: white;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
-moz-transition: .5s opacity ease;
|
||||
-webkit-transition: .5s opacity ease;
|
||||
}
|
||||
#lightbox .close {
|
||||
font-family: sans;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
-moz-border-radius: 8px;
|
||||
-webkit-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
#lightbox.show {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
#lightbox section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#lightbox .content {
|
||||
height: 70%;
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
#lightbox .controls {
|
||||
height: 25%;
|
||||
min-height: 100px;
|
||||
position: relative;
|
||||
padding: 5% 40px 0;
|
||||
}
|
||||
#lightbox .control.prev {
|
||||
color: #fff;
|
||||
left: 0;
|
||||
}
|
||||
#lightbox .control.next {
|
||||
color: #fff;
|
||||
right: 0;
|
||||
}
|
||||
#lightbox .caption {
|
||||
font-size: 18px;
|
||||
}
|
||||
#lightbox img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
-moz-transition: .5s opacity ease;
|
||||
-webkit-transition: .5s opacity ease;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/************************************/
|
||||
/* DETAILS PAGE */
|
||||
/************************************/
|
||||
|
|
@ -877,7 +956,8 @@ td .versions li a {
|
|||
/* CAROUSEL */
|
||||
/************************************/
|
||||
|
||||
.carousel .control {
|
||||
.carousel .control,
|
||||
#lightbox .control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -102,7 +102,87 @@ $(function() {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
(function() {
|
||||
var $document = $(document),
|
||||
$lightbox = $("#lightbox"),
|
||||
$content = $("#lightbox .content"),
|
||||
$caption = $("#lightbox .caption"),
|
||||
current, $strip,
|
||||
lbImage = template('<img id="preview{0}" src="{1}">');
|
||||
if (!$lightbox.length) return;
|
||||
function posLightbox() {
|
||||
$lightbox.css({
|
||||
"top": $document.scrollTop()-1,
|
||||
"left": $document.scrollLeft()
|
||||
});
|
||||
var $img = $lightbox.find("img");
|
||||
$img.each(function () {
|
||||
var $img = $(this);
|
||||
$img.css({
|
||||
"margin-top": -$img.height()/2,
|
||||
"margin-left": -$img.width()/2,
|
||||
"top": "50%",
|
||||
"left": "50%"
|
||||
});
|
||||
});
|
||||
}
|
||||
$document.scroll(posLightbox);
|
||||
$(window).bind("orientationchange", posLightbox);
|
||||
function showLightbox() {
|
||||
$lightbox.show();
|
||||
showImage(this);
|
||||
//I want to ensure the lightbox is painted before fading it in.
|
||||
setTimeout(function () {
|
||||
$lightbox.addClass("show");
|
||||
},0);
|
||||
}
|
||||
function showImage(a) {
|
||||
var $a = $(a),
|
||||
$oldimg = $lightbox.find("img");
|
||||
current = $a.parent().index();
|
||||
$strip = $a.closest("ul").find("li");
|
||||
var $img = $("#preview"+current);
|
||||
if ($img.length) {
|
||||
posLightbox();
|
||||
$oldimg.css("opacity", 0);
|
||||
$img.css("opacity", 1);
|
||||
} else {
|
||||
$img = $(lbImage([current, $a.attr("href")]));
|
||||
$content.append($img);
|
||||
$img.load(function(e) {
|
||||
posLightbox();
|
||||
$oldimg.css("opacity", 0);
|
||||
$img.css("opacity", 1);
|
||||
for (var i=0; i<$strip.length; i++) {
|
||||
if (i != current) {
|
||||
var $p = $strip.eq(i).find("a");
|
||||
$content.append(lbImage([i, $p.attr("href")]));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
$caption.text($a.attr("title"));
|
||||
}
|
||||
$("#lightbox .next").click(_pd(function() {
|
||||
if (current < $strip.length-1) {
|
||||
showImage($strip.eq(current+1).find("a"));
|
||||
}
|
||||
}));
|
||||
$("#lightbox .prev").click(_pd(function() {
|
||||
if (current > 0) {
|
||||
showImage($strip.eq(current-1).find("a"));
|
||||
}
|
||||
}));
|
||||
$(".carousel ul a").click(_pd(showLightbox));
|
||||
$("#lightbox .close, #lightbox .content").click(_pd(function() {
|
||||
$lightbox.removeClass("show");
|
||||
// We can't trust transitionend to fire in all cases.
|
||||
setTimeout(function() {
|
||||
$lightbox.hide();
|
||||
}, 500);
|
||||
}));
|
||||
$document.scroll();
|
||||
})();
|
||||
});
|
||||
|
||||
$(".desktop-link").attr("href", window.location).click(function() {
|
||||
|
|
|
|||
|
|
@ -470,6 +470,7 @@ MINIFY_BUNDLES = {
|
|||
'js/zamboni/jqmobile.js',
|
||||
'js/zamboni/truncation.js',
|
||||
'js/zamboni/mobile.js',
|
||||
'js/zamboni/format.js',
|
||||
),
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,8 @@
|
|||
</p>
|
||||
{% endblock footer %}
|
||||
</footer>
|
||||
|
||||
{% block staging %}
|
||||
{% endblock %}
|
||||
{# js #}
|
||||
{% block site_js %}
|
||||
{{ js('zamboni/mobile') }}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче