diff --git a/css/fluidbox.css b/css/fluidbox.css index c0996d1..3652987 100644 --- a/css/fluidbox.css +++ b/css/fluidbox.css @@ -43,7 +43,6 @@ .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; @@ -51,7 +50,17 @@ transition-property: opacity, transform; transition-duration: 0s, 0.25s; transition-delay: 0.25s, 0s; } - .fluidbox-ghost::before { + .fluidbox-opened .fluidbox-ghost { + transition-delay: 0s, 0s; } + +.fluidbox-loader { + perspective: 200px; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; } + .fluidbox-loader::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 */ @@ -67,10 +76,9 @@ padding-bottom: 20%; /* Delay disapparing of loader for graceful transition */ transition-delay: 0.125s; } - .fluidbox-loading .fluidbox-ghost::before { - opacity: 1; - transition-delay: 0s; } - .fluidbox-opened .fluidbox-ghost { - transition-delay: 0s, 0s; } + +.fluidbox-loading .fluidbox-loader::before { + opacity: 1; + transition-delay: 0s; } /*# sourceMappingURL=fluidbox.css.map */ diff --git a/css/fluidbox.css.map b/css/fluidbox.css.map index 7167b0e..b3e7d4e 100644 --- a/css/fluidbox.css.map +++ b/css/fluidbox.css.map @@ -1,6 +1,6 @@ { "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,4BAA2C;;AAEjF,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,SAAE;EACvB,gBAAgB,EAAE,SAAoB;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,EAAE;EAGrB,gCAAmB;IAAE,gBAAgB,EAAE,MAAM", +"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,4BAA2C;;AAEjF,eAAgB;EACf,eAAe,EAAE,SAAS;EAC1B,mBAAmB,EAAE,aAAa;EAClC,QAAQ,EAAE,QAAQ;EAClB,2BAA2B,EAAE,0BAA0B;EACvD,wBAAwB,EAAE,uBAAuB;EACjD,sBAAsB,EAAE,qBAAqB;EAC7C,mBAAmB,EAAE,kBAAkB;EACvC,mBAAmB,EAAE,SAAE;EACvB,gBAAgB,EAAE,SAAoB;EAEtC,gCAAmB;IAAE,gBAAgB,EAAE,MAAM;;AAE9C,gBAAiB;EAChB,WAAW,EAAE,KAAK;EAClB,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EAER,wBAAU;IACT,iBAAiB,EAAE,2BAA2B;IAC9C,SAAS,EAAE,2BAA2B;;IAEtC,gBAAgB,EApEG,yBAAiB;IAqEpC,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;;AAI1C,0CAA2C;EAC1C,OAAO,EAAE,CAAC;EACV,gBAAgB,EAAE,EAAE", "sources": ["fluidbox.scss"], "names": [], "file": "fluidbox.css" diff --git a/css/fluidbox.less b/css/fluidbox.less deleted file mode 100644 index 38d8225..0000000 --- a/css/fluidbox.less +++ /dev/null @@ -1,81 +0,0 @@ -// Variable -@transition-duration: .25s; -@overlay-bg-color: rgba(255,255,255,.85); -@animation-bg-color: @overlay-bg-color; - -// Animation -@-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); } -} - -// Rules -.fluidbox { - outline: none; -} -.fluidbox-overlay { - background-color: @overlay-bg-color; - 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 @transition-duration/2 ease-in-out @transition-duration/2; -} -.fluidbox-wrap { - background-position: center center; - background-size: cover; - margin: 0 auto; - position: relative; - transition: all @transition-duration ease-in-out; - - /* To prevent flickering, we delay the showing of the image */ - .fluidbox-closed & img { transition: opacity 0s ease-in-out @transition-duration; } -} -.fluidbox-ghost { - background-size: 100% 100%; - background-position: center center; - 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: 0s, @transition-duration; - transition-delay: @transition-duration, 0s; - - &::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: $animation-bg-color; - content: ''; - transform-style: preserve-3d; - transition: all @transition-duration 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: @transition-duration/2; - } - - .fluidbox-loading &::before { - opacity: 1; - } - - .fluidbox-opened & { transition-delay: 0s, 0s; } -} \ No newline at end of file diff --git a/css/fluidbox.scss b/css/fluidbox.scss index 76c8c8e..4a79f31 100644 --- a/css/fluidbox.scss +++ b/css/fluidbox.scss @@ -46,8 +46,7 @@ $animation-bg-color: $overlay-bg-color; } .fluidbox-ghost { background-size: 100% 100%; - background-position: center center; - perspective: 200px; + background-position: center center; position: absolute; -webkit-transition-property: opacity, -webkit-transform; -moz-transition-property: opacity, -moz-transform; @@ -56,6 +55,16 @@ $animation-bg-color: $overlay-bg-color; transition-duration: 0s, $transition-duration; transition-delay: $transition-duration, 0s; + .fluidbox-opened & { transition-delay: 0s, 0s; } +} +.fluidbox-loader { + perspective: 200px; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + &::before { -webkit-animation: fluidboxLoading 1s infinite; animation: fluidboxLoading 1s infinite; @@ -73,11 +82,9 @@ $animation-bg-color: $overlay-bg-color; /* Delay disapparing of loader for graceful transition */ transition-delay: $transition-duration/2; } +} - .fluidbox-loading &::before { - opacity: 1; - transition-delay: 0s; - } - - .fluidbox-opened & { transition-delay: 0s, 0s; } +.fluidbox-loading .fluidbox-loader::before { + opacity: 1; + transition-delay: 0s; } \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index 0464dd2..df4a51f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -375,6 +375,67 @@ main section { font-size: 3em; } +/* Three dimensional visualization of Fluidbox */ +#fluidbox-3d { + margin: 0 0 1.5rem 0; + padding: 0; + perspective: 5000; /* Keep things isometric */ + width: 100%; + height: 400px; + position: relative; +} +#fluidbox-3d * { + transform-style: preserve-3d; +} +#fluidbox-3d figcaption { + font-size: .85rem; + position: absolute; + bottom: 0; + margin-top: .75rem; + text-align: center; + width: 100%; +} +#fluidbox-3d .canvas { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%) rotateX(45deg) rotateZ(45deg); +} +#fluidbox-3d .fluidbox-wrap { + background-image: url('http://placehold.it/300x300/b13131/ffffff/&text=Wrap'); + border: none; +} + #fluidbox-3d:hover .fluidbox-wrap { + transform: translate3d(-8rem, 8rem, 0); + } +#fluidbox-3d img { + display: block; + opacity: .75 !important; /* Override required for pre-existing inline-styles */ + max-width: 100%; + transition: all .25s ease-in-out; + transform: translate3d(0, 0, 2rem); +} + #fluidbox-3d:hover img { + opacity: .5 !important; /* Override required for pre-existing inline-styles */ + transform: translate3d(8rem, -8rem, 2rem); + } + #fluidbox-3d img:hover { + opacity: 1 !important; /* Override required for pre-existing inline-styles */ + } +#fluidbox-3d .fluidbox-ghost { + background-image: url('http://placehold.it/300x300/&text=Ghost'); + opacity: .75; + transform: translate3d(0, 0, 4rem); + transition-delay: 0; +} + #fluidbox-3d:hover .fluidbox-ghost { + opacity: .5; + transform: translate3d(16rem, -16rem, 4rem); + } + #fluidbox-3d .fluidbox-ghost:hover { + opacity: 1; + } + /* Adjust positioning of images to introduce variety */ .demo a[data-fluidbox], .demo a.fluidbox, diff --git a/index.html b/index.html index 93e079e..71b671e 100644 --- a/index.html +++ b/index.html @@ -108,6 +108,37 @@

In the wild

In addition, Fluidbox has been successfully ported over to a WordPress plugin. You can also learn how to implement it manually in WordPress, too.

+
+

How does it work?

+

Fluidbox works by replacing your markup, which should be as follow:

+ 
<a href="/path/to/image" title="">
+    <img src="/path/to/image" alt="" title="" />
+</a>
+

…into…

+ 
<a href="/path/to/image" data-fluidbox="" class="fluidbox fluidbox-closed" id="fluidbox-[n]">
+    <div class="fluidbox-wrap" style="z-index: 990;">
+        <img src="/path/to/image" alt="" title="" style="opacity: 1;">
+        <div class="fluidbox-ghost" style="width: [w]; height: [h]; top: [t]; left: [l];"></div>
+    </div>
+</a>
+

…where:

+ +

The replaced and rendered markup for each image targeted with Fluidbox can be presented in a three-dimensional way as follow:

+
+
+
+
+
Three-dimensional visualization of rendered Fluidbox markup.
+
+

Each initialized Fluidbox instance can therefore be styled independently from each other using CSS alone, requiring no further manipulation via JS (unless required on the user's behalf for specific implementations). Fluidbox listens to the click event triggered on the ghost element, .fluidbox-ghost, and toggles between two binary states, open or closed.

+
+

Usage notes

Dependencies

@@ -395,6 +426,25 @@

Overlay images

immediateOpen: true }); + // Three-dimensional markup demo + $('#fluidbox-3d a').click(function(e) { + e.preventDefault(); + }); + + // Update three-dimensional markup demo ghost element + var ghostresize = function() { + var $img = $('#fluidbox-3d img'); + $('#fluidbox-3d .fluidbox-ghost').css({ + width: $img.width(), + height: $img.height(), + top: 0, + left: 0 + }); + }; + ghostresize(); + $('#fluidbox-3d img').load(ghostresize); + $(window).resize(ghostresize); + // Trigger recomputing on Flexbox items, sometimes buggy width calculations due to browser recomputation of flex items $('.cols').each(function() { var a = [], diff --git a/jquery.fluidbox.js b/jquery.fluidbox.js index 912ddb6..334d361 100644 --- a/jquery.fluidbox.js +++ b/jquery.fluidbox.js @@ -86,7 +86,8 @@ var customTransitionEnd = whichTransitionEvent(); keyCode: 27 } ], - immediateOpen: false + immediateOpen: false, + loadingEle: true }, opts); // Keyboard events @@ -124,6 +125,7 @@ var customTransitionEnd = whichTransitionEvent(); // Get shorthand for more objects var $img = $activeFb.find('img').first(), $ghost = $activeFb.find('.fluidbox-ghost'), + $loader = $activeFb.find('.fluidbox-loader'), $wrap = $activeFb.find('.fluidbox-wrap'), $data = $activeFb.data(), fHeight = 0, @@ -157,7 +159,7 @@ var customTransitionEnd = whichTransitionEvent(); $data.imgScaleY = $data.imgScale; // Calcualte how much to scale along the x-axis - $data.imgScaleX = $data.natWidth*(($img.height()*$data.imgScaleY))/$data.natHeight)/$img.width(); + $data.imgScaleX = $data.natWidth*(($img.height()*$data.imgScaleY)/$data.natHeight)/$img.width(); } else { // Check if linked image is smaller or larger than intended fill @@ -184,11 +186,14 @@ var customTransitionEnd = whichTransitionEvent(); // Apply CSS transforms to ghost element // For offsetX and Y: round to one decimal place // For scale: round to three decimal places - $ghost.css({ + $ghost + .add($loader) + .css({ 'transform': 'translate('+parseInt(offsetX*10)/10+'px,'+parseInt(offsetY*10)/10+'px) scale('+ scale +')', top: $img.offset().top - $wrap.offset().top, left: $img.offset().left - $wrap.offset().left - }).one(customTransitionEnd, function() { + }); + $ghost.one(customTransitionEnd, function() { $.each(customEvents, function(i,customEvent) { $activeFb.trigger(customEvent); }); @@ -202,6 +207,7 @@ var customTransitionEnd = whichTransitionEvent(); if($fbItem.hasClass('fluidbox')) { var $img = $fbItem.find('img').first(), $ghost = $fbItem.find('.fluidbox-ghost'), + $loader = $fbItem.find('.fluidbox-loader'), $wrap = $fbItem.find('.fluidbox-wrap'), data = $img.data(); @@ -212,7 +218,9 @@ var customTransitionEnd = whichTransitionEvent(); data.imgRatio = $img.width()/$img.height(); // Resize and position ghost element - $ghost.css({ + $ghost + .add($loader) + .css({ width: $img.width(), height: $img.height(), top: $img.offset().top - $wrap.offset().top + parseInt($img.css('borderTopWidth')) + parseInt($img.css('paddingTop')), @@ -242,6 +250,7 @@ var customTransitionEnd = whichTransitionEvent(); var $activeFb = $(this), $img = $(this).find('img').first(), $ghost = $(this).find('.fluidbox-ghost'), + $loader = $(this).find('.fluidbox-loader'), $wrap = $(this).find('.fluidbox-wrap'), linkedImg = encodeURI($activeFb.attr('href')), timer = {}; @@ -300,12 +309,15 @@ var customTransitionEnd = whichTransitionEvent(); // Reverse animation on wrapped elements, and restore stacking order // You might want to change this value if your transition timing is longer - $ghost.css({ + $ghost + .add($loader) + .css({ 'transform': 'translate(0,0) scale(1)', opacity: 0, top: $img.offset().top - $wrap.offset().top + parseInt($img.css('borderTopWidth')) + parseInt($img.css('paddingTop')), left: $img.offset().left - $wrap.offset().left + parseInt($img.css('borderLeftWidth')) + parseInt($img.css('paddingLeft')) - }).one(customTransitionEnd, function() { + }); + $ghost.one(customTransitionEnd, function() { $activeFb.trigger('closeend'); }); $img.css({ opacity: 1 }); @@ -453,6 +465,11 @@ var customTransitionEnd = whichTransitionEvent(); } }); + // Define loader + var $fbLoader = $('
', { + 'class': 'fluidbox-loader' + }); + // Update count for global Fluidbox instances fbCount+=1; @@ -488,6 +505,11 @@ var customTransitionEnd = whichTransitionEvent(); } }); + // Check of loader is enabled + if(settings.loadingEle) { + $fbItem.find('.fluidbox-ghost').after($fbLoader); + } + // Custom trigger $(this).on('recompute', function() { funcResize($(this)); diff --git a/jquery.fluidbox.min.js b/jquery.fluidbox.min.js index c32e0d3..2036fca 100644 --- a/jquery.fluidbox.min.js +++ b/jquery.fluidbox.min.js @@ -1 +1 @@ -function whichTransitionEvent(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]}!function(a,b){var c=function(a,b,c){var d;return function(){function g(){c||a.apply(e,f),d=null}var e=this,f=arguments;d?clearTimeout(d):c&&a.apply(e,f),d=setTimeout(g,b||100)}};jQuery.fn[b]=function(a){return a?this.bind("resize",c(a)):this.trigger(b)}}(jQuery,"smartresize");var customTransitionEnd=whichTransitionEvent();!function(a){var b=0;a.fn.fluidbox=function(c){var d=a.extend(!0,{viewportFill:.95,debounceResize:!0,stackIndex:1e3,stackIndexDelta:10,closeTrigger:[{selector:".fluidbox-overlay",event:"click"},{selector:"document",event:"keyup",keyCode:27}],immediateOpen:!1},c),e=["keyup","keydown","keypress"];d.stackIndex",{"class":"fluidbox-overlay",css:{"z-index":d.stackIndex}});var h,f=this,g=a(window),i=function(b){a(b+".fluidbox-opened").trigger("click")},j=function(b,c){var e=b.find("img"),f=b.find(".fluidbox-ghost"),i=b.find(".fluidbox-wrap"),j=b.data(),k=0,l=0;e.data().imgRatio=j.natWidth/j.natHeight;var m,n,o;h>e.data().imgRatio?(k=j.natHeightf.imgRatio?g.height()*d.viewportFill/b.height():g.width()*d.viewportFill/b.width()}if(h=g.width()/g.height(),a.hasClass("fluidbox")){var b=a.find("img"),c=a.find(".fluidbox-ghost"),e=a.find(".fluidbox-wrap"),f=b.data();i(),b.load(i)}},l=function(b){if(a(this).hasClass("fluidbox")){var c=a(this),e=a(this).find("img"),f=a(this).find(".fluidbox-ghost"),g=a(this).find(".fluidbox-wrap"),h={},i=function(){c.trigger("openstart"),c.append($fbOverlay).data("fluidbox-state",1).removeClass("fluidbox-closed").addClass("fluidbox-opened"),h.close&&window.clearTimeout(h.close),h.open=window.setTimeout(function(){a(".fluidbox-overlay").css({opacity:1})},10),a(".fluidbox-wrap").css({zIndex:d.stackIndex-d.stackIndexDelta-1}),g.css({"z-index":d.stackIndex+d.stackIndexDelta})},k=function(){c.trigger("closestart"),c.data("fluidbox-state",0).removeClass("fluidbox-opened fluidbox-loaded fluidbox-loading").addClass("fluidbox-closed"),h.open&&window.clearTimeout(h.open),h.close=window.setTimeout(function(){a(".fluidbox-overlay").remove(),g.css({"z-index":d.stackIndex-d.stackIndexDelta})},10),a(".fluidbox-overlay").css({opacity:0}),f.css({transform:"translate(0,0) scale(1)",opacity:0,top:e.offset().top-g.offset().top+parseInt(e.css("borderTopWidth"))+parseInt(e.css("paddingTop")),left:e.offset().left-g.offset().left+parseInt(e.css("borderLeftWidth"))+parseInt(e.css("paddingLeft"))}).one(customTransitionEnd,function(){c.trigger("closeend")}),e.css({opacity:1})};0!==a(this).data("fluidbox-state")&&a(this).data("fluidbox-state")?k():(c.addClass("fluidbox-loading"),e.css({opacity:0}),f.css({"background-image":"url("+e.attr("src")+")",opacity:1}),d.immediateOpen?(c.data("natWidth",e[0].naturalWidth).data("natHeight",e[0].naturalHeight),i(),j(c,["openend"]),a("",{src:c.attr("href")}).load(function(){c.trigger("imageloaddone").trigger("delayedloaddone").removeClass("fluidbox-loading").addClass("fluidbox-loaded").data("natWidth",a(this)[0].naturalWidth).data("natHeight",a(this)[0].naturalHeight),f.css({"background-image":"url("+c.attr("href")+")"}),j(c,["delayedreposdone"])}).error(function(){c.trigger("imageloadfail"),k()})):a("",{src:c.attr("href")}).load(function(){c.trigger("imageloaddone").removeClass("fluidbox-loading").addClass("fluidbox-loaded").data("natWidth",a(this)[0].naturalWidth).data("natHeight",a(this)[0].naturalHeight),f.css({"background-image":"url("+c.attr("href")+")"}),i(),j(c,["openend"])}).error(function(){c.trigger("imageloadfail"),k()})),b.preventDefault()}},m=function(b){b?k(b):f.each(function(){k(a(this))});var c=a("a.fluidbox.fluidbox-opened");c.length>0&&j(c,["resizeend"])};return d.debounceResize?a(window).smartresize(function(){m()}):a(window).resize(function(){m()}),f.each(function(){if(a(this).is("a")&&1===a(this).children().length&&a(this).children().is("img")&&"none"!==a(this).css("display")&&"none"!==a(this).parents().css("display")){var f=a("
",{"class":"fluidbox-wrap",css:{"z-index":d.stackIndex-d.stackIndexDelta}});b+=1;var h=a(this);h.addClass("fluidbox fluidbox-closed").attr("id","fluidbox-"+b).wrapInner(f).find("img").css({opacity:1}).after('
').each(function(){var b=a(this);b.width()>0&&b.height()>0?(k(h),h.click(l)):b.load(function(){k(h),h.click(l),h.trigger("thumbloaddone")}).error(function(){h.trigger("thumbloadfail")})}),a(this).on("recompute",function(){m(a(this)),a(this).trigger("recomputeend")});var j="#fluidbox-"+b;d.closeTrigger&&a.each(d.closeTrigger,function(b){var c=d.closeTrigger[b];"window"!=c.selector?"document"==c.selector&&(c.keyCode&&e.indexOf(c.event)>-1?a(document).on(c.event,function(a){a.keyCode==c.keyCode&&i(j)}):a(document).on(c.event,j,function(){i(j)})):g.on(c.event,function(){i(j)})})}}),f}}(jQuery); \ No newline at end of file +function whichTransitionEvent(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]}!function(a,b){var c=function(a,b,c){var d;return function(){function g(){c||a.apply(e,f),d=null}var e=this,f=arguments;d?clearTimeout(d):c&&a.apply(e,f),d=setTimeout(g,b||100)}};jQuery.fn[b]=function(a){return a?this.bind("resize",c(a)):this.trigger(b)}}(jQuery,"smartresize");var customTransitionEnd=whichTransitionEvent();!function(a){var b=0;a.fn.fluidbox=function(c){var d=a.extend(!0,{viewportFill:.95,debounceResize:!0,stackIndex:1e3,stackIndexDelta:10,closeTrigger:[{selector:".fluidbox-overlay",event:"click"},{selector:"document",event:"keyup",keyCode:27}],immediateOpen:!1,loadingEle:!0},c),e=["keyup","keydown","keypress"];d.stackIndex",{"class":"fluidbox-overlay",css:{"z-index":d.stackIndex}});var h,f=this,g=a(window),i=function(b){a(b+".fluidbox-opened").trigger("click")},j=function(b,c){var e=b.find("img").first(),f=b.find(".fluidbox-ghost"),i=b.find(".fluidbox-loader"),j=b.find(".fluidbox-wrap"),k=b.data(),l=0,m=0;({w:{n:k.natWidth},h:{n:k.natHeight}}),e.data().imgRatio=k.natWidth/k.natHeight,h>e.data().imgRatio?(l=k.natHeighti.imgRatio?g.height()*d.viewportFill/b.height():g.width()*d.viewportFill/b.width()}if(h=g.width()/g.height(),a.hasClass("fluidbox")){var b=a.find("img").first(),c=a.find(".fluidbox-ghost"),e=a.find(".fluidbox-loader"),f=a.find(".fluidbox-wrap"),i=b.data();j(),b.load(j)}},l=function(b){if(a(this).hasClass("fluidbox")){var c=a(this),e=a(this).find("img").first(),f=a(this).find(".fluidbox-ghost"),g=a(this).find(".fluidbox-loader"),h=a(this).find(".fluidbox-wrap"),i=encodeURI(c.attr("href")),k={},l=function(){c.trigger("openstart"),c.append($fbOverlay).data("fluidbox-state",1).removeClass("fluidbox-closed").addClass("fluidbox-opened"),k.close&&window.clearTimeout(k.close),k.open=window.setTimeout(function(){a(".fluidbox-overlay").css({opacity:1})},10),a(".fluidbox-wrap").css({zIndex:d.stackIndex-d.stackIndexDelta-1}),h.css({"z-index":d.stackIndex+d.stackIndexDelta})},m=function(){c.trigger("closestart"),c.data("fluidbox-state",0).removeClass("fluidbox-opened fluidbox-loaded fluidbox-loading").addClass("fluidbox-closed"),k.open&&window.clearTimeout(k.open),k.close=window.setTimeout(function(){a(".fluidbox-overlay").remove(),h.css({"z-index":d.stackIndex-d.stackIndexDelta})},10),a(".fluidbox-overlay").css({opacity:0}),f.add(g).css({transform:"translate(0,0) scale(1)",opacity:0,top:e.offset().top-h.offset().top+parseInt(e.css("borderTopWidth"))+parseInt(e.css("paddingTop")),left:e.offset().left-h.offset().left+parseInt(e.css("borderLeftWidth"))+parseInt(e.css("paddingLeft"))}),f.one(customTransitionEnd,function(){c.trigger("closeend")}),e.css({opacity:1})};0!==a(this).data("fluidbox-state")&&a(this).data("fluidbox-state")?m():(c.addClass("fluidbox-loading"),e.css({opacity:0}),f.css({"background-image":"url("+e.attr("src")+")",opacity:1}),d.immediateOpen?(c.data("natWidth",e[0].naturalWidth).data("natHeight",e[0].naturalHeight),l(),j(c,["openend"]),a("",{src:i}).load(function(){c.trigger("imageloaddone").trigger("delayedloaddone").removeClass("fluidbox-loading").addClass("fluidbox-loaded").data("natWidth",a(this)[0].naturalWidth).data("natHeight",a(this)[0].naturalHeight),f.css({"background-image":"url("+i+")"}),j(c,["delayedreposdone"])}).error(function(){c.trigger("imageloadfail"),m()})):a("",{src:i}).load(function(){c.trigger("imageloaddone").removeClass("fluidbox-loading").addClass("fluidbox-loaded").data("natWidth",a(this)[0].naturalWidth).data("natHeight",a(this)[0].naturalHeight),f.css({"background-image":"url("+i+")"}),l(),j(c,["openend"])}).error(function(){c.trigger("imageloadfail"),m()})),b.preventDefault()}},m=function(b){b?k(b):f.each(function(){k(a(this))});var c=a("a.fluidbox.fluidbox-opened");c.length>0&&j(c,["resizeend"])};return d.debounceResize?a(window).smartresize(function(){m()}):a(window).resize(function(){m()}),f.each(function(){if(a(this).is("a")&&1===a(this).children().length&&a(this).children().is("img")&&"none"!==a(this).css("display")&&"none"!==a(this).parents().css("display")){var f=a("
",{"class":"fluidbox-wrap",css:{"z-index":d.stackIndex-d.stackIndexDelta}}),h=a("
",{"class":"fluidbox-loader"});b+=1;var j=a(this);j.addClass("fluidbox fluidbox-closed").attr("id","fluidbox-"+b).wrapInner(f).find("img").first().css({opacity:1}).after('
').each(function(){var b=a(this);b.width()>0&&b.height()>0?(k(j),j.click(l)):b.load(function(){k(j),j.click(l),j.trigger("thumbloaddone")}).error(function(){j.trigger("thumbloadfail")})}),d.loadingEle&&j.find(".fluidbox-ghost").after(h),a(this).on("recompute",function(){m(a(this)),a(this).trigger("recomputeend")});var n="#fluidbox-"+b;d.closeTrigger&&a.each(d.closeTrigger,function(b){var c=d.closeTrigger[b];"window"!=c.selector?"document"==c.selector&&(c.keyCode&&e.indexOf(c.event)>-1?a(document).on(c.event,function(a){a.keyCode==c.keyCode&&i(n)}):a(document).on(c.event,n,function(){i(n)})):g.on(c.event,function(){i(n)})})}}),f}}(jQuery); \ No newline at end of file