Initial import of Fluidbox to show images like Medium

source: https://github.com/terrymun/Fluidbox
author: Terry Mun
license: MIT
release: 1.4.3
release sha256sum: 18a775df12f943d376038d84dae5dadb52f6b0ad9a950a480c7ad98aea39e9fa jquery.fluidbox.min.js
date: 2015-02-11

To be added to base template for fancy image lightboxes

alchemy/static/css/fluidbox.css

@@ -0,0 +1,76 @@
+@-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 */