Revert "Add support for fancy fluidbox #75"

This reverts commit 688fc0fbae.
main
Alan Orth 2015-02-03 12:39:59 +03:00
parent 688fc0fbae
commit 27dba1a192
4 changed files with 1 additions and 100 deletions

View File

@ -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

View File

@ -46,25 +46,6 @@
<script src="{{ SITEURL }}/theme/js/jquery.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 -->
</html>