parent
688fc0fbae
commit
27dba1a192
|
@ -1,76 +0,0 @@
|
||||||
@-webkit-keyframes fluidboxLoading {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
|
|
||||||
50% {
|
|
||||||
-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
|
|
||||||
100% {
|
|
||||||
-webkit-transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
|
|
||||||
@keyframes fluidboxLoading {
|
|
||||||
0% {
|
|
||||||
transform: translate(-50%, -50%) rotateX(0) rotateY(0); }
|
|
||||||
50% {
|
|
||||||
transform: translate(-50%, -50%) rotateX(-180deg) rotateY(0); }
|
|
||||||
100% {
|
|
||||||
transform: translate(-50%, -50%) rotateX(-180deg) rotateY(-180deg); } }
|
|
||||||
.fluidbox {
|
|
||||||
outline: none; }
|
|
||||||
|
|
||||||
.fluidbox-overlay {
|
|
||||||
background-color: rgba(255, 255, 255, 0.85);
|
|
||||||
cursor: pointer;
|
|
||||||
cursor: -webkit-zoom-out;
|
|
||||||
cursor: -moz-zoom-out;
|
|
||||||
cursor: zoom-out;
|
|
||||||
opacity: 0;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
/* Transition time for overlay is halved to ensure that flickering doesn't happen */
|
|
||||||
transition: all 0.125s ease-in-out 0.125s; }
|
|
||||||
|
|
||||||
.fluidbox-wrap {
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.25s ease-in-out;
|
|
||||||
/* To prevent flickering, we delay the showing of the image */ }
|
|
||||||
.fluidbox-closed .fluidbox-wrap img {
|
|
||||||
transition: opacity 0 ease-in-out 0.25s; }
|
|
||||||
|
|
||||||
.fluidbox-ghost {
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-position: center center;
|
|
||||||
perspective: 200px;
|
|
||||||
position: absolute;
|
|
||||||
-webkit-transition-property: opacity, -webkit-transform;
|
|
||||||
-moz-transition-property: opacity, -moz-transform;
|
|
||||||
-o-transition-property: opacity, -o-transform;
|
|
||||||
transition-property: opacity, transform;
|
|
||||||
transition-duration: 0, 0.25s;
|
|
||||||
transition-delay: 0.25s, 0; }
|
|
||||||
.fluidbox-ghost::before {
|
|
||||||
-webkit-animation: fluidboxLoading 1s infinite;
|
|
||||||
animation: fluidboxLoading 1s infinite;
|
|
||||||
/* You can replace this with any color you want, or even a loading gif if desired */
|
|
||||||
background-color: rgba(255, 255, 255, 0.85);
|
|
||||||
content: '';
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transition: all 0.25s ease-in-out;
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 20%;
|
|
||||||
padding-bottom: 20%;
|
|
||||||
/* Delay disapparing of loader for graceful transition */
|
|
||||||
transition-delay: 0.125s; }
|
|
||||||
.fluidbox-loading .fluidbox-ghost::before {
|
|
||||||
opacity: 1;
|
|
||||||
transition-delay: 0; }
|
|
||||||
.fluidbox-opened .fluidbox-ghost {
|
|
||||||
transition-delay: 0, 0; }
|
|
||||||
|
|
||||||
/*# sourceMappingURL=fluidbox.css.map */
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -46,25 +46,6 @@
|
||||||
|
|
||||||
<script src="{{ SITEURL }}/theme/js/jquery.min.js"></script>
|
<script src="{{ SITEURL }}/theme/js/jquery.min.js"></script>
|
||||||
<script src="{{ SITEURL }}/theme/js/bootstrap.min.js"></script>
|
<script src="{{ SITEURL }}/theme/js/bootstrap.min.js"></script>
|
||||||
<script src="{{ SITEURL }}/theme/js/jquery.fluidbox.min.js"></script>
|
|
||||||
<script>
|
|
||||||
$('.full-post a[data-fluidbox]').fluidbox();
|
|
||||||
// Trigger recomputing on Flexbox items, sometimes buggy width calculations due to browser recomputation of flex items
|
|
||||||
$('.cols').each(function() {
|
|
||||||
var a = [],
|
|
||||||
$f = $(this).find('a.fluidbox');
|
|
||||||
|
|
||||||
$f.find('img').each(function() {
|
|
||||||
var i = $.Deferred();
|
|
||||||
$(this).load(i.resolve).error(i.resolve);
|
|
||||||
a.push(i);
|
|
||||||
});
|
|
||||||
|
|
||||||
$.when.apply(null, a).done(function() {
|
|
||||||
$f.trigger('recompute');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body> <!-- 42 -->
|
</body> <!-- 42 -->
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue