github/pelican-alchemy
1
0
Fork 1
mirror of https://github.com/nairobilug/pelican-alchemy.git synced 2024-12-30 12:15:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial import of Fluidbox to show images like Medium

Browse source 
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
This commit is contained in:
Anthony Oduor 2015-02-12 00:41:55 +03:00
commit 5fcab86bab
5 changed files with 128 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

76
alchemy/static/css/fluidbox.css Normal file
View file

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

7
alchemy/static/css/fluidbox.css.map Normal file
View file

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": "AAMA,kCAIC;EAHA,EAAI;IAAE,iBAAiB,EAAE,2CAA4C;EACrE,GAAK;IAAE,iBAAiB,EAAE,iDAAiD;EAC3E,IAAK;IAAE,iBAAiB,EAAE,uDAAuD;AAElF,0BAIC;EAHA,EAAI;IAAE,SAAS,EAAE,2CAA4C;EAC7D,GAAK;IAAE,SAAS,EAAE,iDAAiD;EACnE,IAAK;IAAE,SAAS,EAAE,uDAAuD;AAI1E,SAAU;EACT,OAAO,EAAE,IAAI;;AAEd,iBAAkB;EACjB,gBAAgB,EAnBI,yBAAiB;EAoBrC,MAAM,EAAE,OAAO;EACf,MAAM,EAAE,gBAAgB;EACxB,MAAM,EAAE,aAAa;EACrB,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;;EAER,UAAU,EAAE,6BAA6D;;AAE1E,cAAe;EACd,mBAAmB,EAAE,aAAa;EAClC,eAAe,EAAE,KAAK;EACtB,MAAM,EAAE,MAAM;EACd,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,qBAAoC;;EAGhD,mCAAuB;IAAE,UAAU,EAAE,2BAA0C;;AAEhF,eAAgB;EACf,eAAe,EAAE,SAAS;EAC1B,mBAAmB,EAAE,aAAa;EAClC,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,QAAQ;EAClB,2BAA2B,EAAE,0BAA0B;EACvD,wBAAwB,EAAE,uBAAuB;EACjD,sBAAsB,EAAE,qBAAqB;EAC7C,mBAAmB,EAAE,kBAAkB;EACvC,mBAAmB,EAAE,QAAC;EACtB,gBAAgB,EAAE,QAAoB;EAEtC,uBAAU;IACT,iBAAiB,EAAE,2BAA2B;IAC9C,SAAS,EAAE,2BAA2B;;IAEtC,gBAAgB,EA3DG,yBAAiB;IA4DpC,OAAO,EAAE,EAAE;IACX,eAAe,EAAE,WAAW;IAC5B,UAAU,EAAE,qBAAoC;IAChD,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,GAAG;IACR,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,cAAc,EAAE,GAAG;;IAEnB,gBAAgB,EAAE,MAAsB;EAGzC,yCAA4B;IAC3B,OAAO,EAAE,CAAC;IACV,gBAAgB,EAAE,CAAC;EAGpB,gCAAmB;IAAE,gBAAgB,EAAE,IAAI",
"sources": ["fluidbox.scss"],
"names": [],
"file": "fluidbox.css"
}