diff --git a/README.md b/README.md
index 8f2927b..1914946 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,8 @@ To add your site, write to me at [@teddyrised](https://twitter.com/teddyrised).
| 1.2.5 |
**Bug fix:** Minimized white flash issue and fixed the stacking order bug introduced in v1.2.4α. A new option is now available, known as `stackIndex`. It is set to `999` by default, but if you have other absolutely positioned elements on the page that you want to overlay, you can change this option (alternatively, modify/lower the `z-index` of offending elements).
**Update:** Included the updated licenses in `license.md` and `license.txt`.
|
| 1.2.6 |
**Bug fix:** Replaced the use of `transitionend` event detection for timing effects, due to the fact that the event lacks cross-browser support and standardization. This issue is particularly bad for Firefox, which showed that the `transitionend` is not triggered properly, causing parts of the plugin to break. I have chosen to fall back to the native JS' `setTimeout` and `clearTimeout` functions.
|
| 1.2.7 |
**Bug fix:** Fixed issues when the `.one()` event is not propery unbound, especially after rapid, successive clicking.
**Update:** Added a new option called `stackIndexDelta`, where you can dictate how much the z-index should change when Fluidbox is toggled. The default is set to 10. If you have a lot of absolutely positioned elements on the page, you might want to increase this delta value.
|
-| 1.3.0 |
**Update:** Authored by [@hybernaut](https://github.com/hybernaut). Removes dependency on imagesLoaded for a speedier performance — instead, listens to `.load()` event on each individual Fluidbox thumbnail separately when triggering Fluidbox. Click handler has been migrated to a separate function to aid clarity.
**Bug fix:** The resize function used to check for the presence of `a[data-fluidbox]`, which might not be present if users choose other ways to identify Fluidbox thumbnails. Selector has been updated to the universal `a.fluidbox.fluidbox-opened`.
+| 1.3.0 |
**Update:** Authored by [@hybernaut](https://github.com/hybernaut). Removes dependency on imagesLoaded for a speedier performance — instead, listens to `.load()` event on each individual Fluidbox thumbnail separately when triggering Fluidbox. Click handler has been migrated to a separate function to aid clarity.
**Bug fix:** The resize function used to check for the presence of `a[data-fluidbox]`, which might not be present if users choose other ways to identify Fluidbox thumbnails. Selector has been updated to the universal `a.fluidbox.fluidbox-opened`.
|
+| 1.3.1 |
**Update & bugfix:** Removed timer in JS, and rely on CSS3's very own `transition-delay` instead. This fixes the issue of rapid clicking causing the enlarged image not showing up.
|
## Installation
To install Fluidbox, you will have to include the following resources in your page. The JS files should be loaded in the order stipulated below. For the CSS file, you can either incorporate it with your site's stylesheet, or load it externally through the `` element in ``.
diff --git a/css/fluidbox.css b/css/fluidbox.css
index 06cb9d0..ab048c0 100644
--- a/css/fluidbox.css
+++ b/css/fluidbox.css
@@ -11,18 +11,25 @@
left: 0;
bottom: 0;
right: 0;
- transition: .25s ease-in-out;
+ transition: all .25s ease-in-out;
}
.fluidbox-wrap {
background-position: center center;
background-size: cover;
margin: 0 auto;
position: relative;
- transition: .25s ease-in-out;
+ transition: all .25s ease-in-out;
}
.fluidbox-ghost {
background-size: cover;
background-position: center center;
position: absolute;
- transition: .25s ease-in-out;
-}
\ No newline at end of file
+ transition: all .25s ease-in-out;
+}
+ .fluidbox-closed .fluidbox-ghost {
+ -webkit-transition-property: opacity, -webkit-transform;
+ -moz-transition-property: opacity, -moz-transform;
+ -o-transition-propert: opacity, -o-transform;
+ transition-property: opacity, transform;
+ transition-delay: .25s, 0s;
+ }
\ No newline at end of file
diff --git a/jquery.fluidbox.js b/jquery.fluidbox.js
index 76f7426..b66133b 100644
--- a/jquery.fluidbox.js
+++ b/jquery.fluidbox.js
@@ -1,6 +1,6 @@
// Fluidbox
// Description: Replicating the seamless lightbox transition effect seen on Medium.com, with some improvements
-// Version: 1.3.1a
+// Version: 1.3.1
// Author: Terry Mun
// Author URI: http://terrymun.com
@@ -194,11 +194,7 @@
$wrap.css({ 'z-index': settings.stackIndex + settings.stackIndexDelta });
// Set thumbnail image source as background image first, preload later
- // Sometimes the transitionend is not unbound properly, especially when very quick, successive clicking.
- // We turn it off again, just in case.
- $ghost
- .off('webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionEnd')
- .css({
+ $ghost.css({
'background-image': 'url('+$img.attr('src')+')',
opacity: 1
});
@@ -239,12 +235,11 @@
// Reverse animation on wrapped elements, and restore stacking order
// You might want to change this value if your transition timing is longer
- $ghost.css({ 'transform': 'translate(0,0) scale(1)' }).one('webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionEnd', function (){
- $img.css({ opacity: 1 });
- timer['hideGhost'] = window.setTimeout(function() {
- $ghost.css({ opacity: 0 });
- }, 100);
+ $ghost.css({
+ 'transform': 'translate(0,0) scale(1)',
+ opacity: 0
});
+ $img.css({ opacity: 1 });
}
e.preventDefault();
@@ -344,4 +339,4 @@
return $fb;
};
-})(jQuery);
+})(jQuery);
\ No newline at end of file
diff --git a/jquery.fluidbox.min.js b/jquery.fluidbox.min.js
index f067169..53ef4a6 100644
--- a/jquery.fluidbox.min.js
+++ b/jquery.fluidbox.min.js
@@ -1,6 +1,6 @@
// Fluidbox
// Description: Replicating the seamless lightbox transition effect seen on Medium.com, with some improvements
-// Version: 1.3.1a
+// Version: 1.3.1
// Author: Terry Mun
// Author URI: http://terrymun.com
@@ -12,4 +12,4 @@
// -----------------------------
// Fluidbox plugin starts here
// -----------------------------
-!function(a){a.fn.fluidbox=function(b){var c=a.extend(!0,{viewportFill:.95,overlayColor:"rgba(255,255,255,.85)",debounceResize:!0,stackIndex:1e3,stackIndexDelta:10,closeTrigger:[{selector:".fluidbox-overlay",event:"click"},{selector:"document",event:"keyup",keyCode:27}]},b);c.stackIndex",{"class":"fluidbox-overlay",css:{"background-color":c.overlayColor,"z-index":c.stackIndex}});var f,d=this,e=a(window),g=function(){a(".fluidbox-opened").trigger("click")},h=function(a){var b=a.find("img"),c=a.find(".fluidbox-ghost"),d=e.scrollTop()-b.offset().top+.5*b.data("imgHeight")*(b.data("imgScale")-1)+.5*(e.height()-b.data("imgHeight")*b.data("imgScale")),f=.5*b.data("imgWidth")*(b.data("imgScale")-1)+.5*(e.width()-b.data("imgWidth")*b.data("imgScale"))-b.offset().left,g=b.data("imgScale");c.css({transform:"translate("+parseInt(10*f)/10+"px,"+parseInt(10*d)/10+"px) scale("+parseInt(1e3*g)/1e3+")"})},i=function(){d.each(function(){j(a(this))})},j=function(a){function i(){h.imgWidth=b.width(),h.imgHeight=b.height(),h.imgRatio=b.width()/b.height(),d.css({width:b.width(),height:b.height(),top:b.offset().top-g.offset().top,left:b.offset().left-g.offset().left}),h.imgScale=f>h.imgRatio?e.height()*c.viewportFill/b.height():e.width()*c.viewportFill/b.width()}if(f=e.width()/e.height(),a.hasClass("fluidbox")){var b=a.find("img"),d=a.find(".fluidbox-ghost"),g=a.find(".fluidbox-wrap"),h=b.data();i(),b.load(i)}},k=function(b){if(a(this).hasClass("fluidbox")){var d=a(this),e=a(this).find("img"),f=a(this).find(".fluidbox-ghost"),g=a(this).find(".fluidbox-wrap"),i={};0!==a(this).data("fluidbox-state")&&a(this).data("fluidbox-state")?(d.data("fluidbox-state",0).removeClass("fluidbox-opened").addClass("fluidbox-closed"),i.open&&window.clearTimeout(i.open),i.close=window.setTimeout(function(){a(".fluidbox-overlay").remove(),g.css({"z-index":c.stackIndex-c.stackIndexDelta})},10),a(".fluidbox-overlay").css({opacity:0}),f.css({transform:"translate(0,0) scale(1)"}).one("webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionEnd",function(){e.css({opacity:1}),i.hideGhost=window.setTimeout(function(){f.css({opacity:0})},100)})):a("",{src:e.attr("src")}).load(function(){d.append($fbOverlay).data("fluidbox-state",1).removeClass("fluidbox-closed").addClass("fluidbox-opened"),i.close&&window.clearTimeout(i.close),i.hideGhost&&window.clearTimeout(i.hideGhost),i.open=window.setTimeout(function(){a(".fluidbox-overlay").css({opacity:1})},10),g.css({"z-index":c.stackIndex+c.stackIndexDelta}),f.off("webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionEnd").css({"background-image":"url("+e.attr("src")+")",opacity:1}),e.css({opacity:0}),a("",{src:d.attr("href")}).load(function(){f.css({"background-image":"url("+d.attr("href")+")"})}),h(d)}),b.preventDefault()}};c.closeTrigger&&a.each(c.closeTrigger,function(b){var d=c.closeTrigger[b];"window"!=d.selector?"document"==d.selector?d.keyCode?a(document).on(d.event,function(a){a.keyCode==d.keyCode&&g()}):a(document).on(d.event,g):a(document).on(d.event,c.closeTrigger[b].selector,g):e.on(d.event,g)}),d.each(function(){if(a(this).is("a")&&1===a(this).children().length&&a(this).children().is("img")){var d=a("",{"class":"fluidbox-wrap",css:{"z-index":c.stackIndex-c.stackIndexDelta}}),e=a(this);e.addClass("fluidbox").wrapInner(d).find("img").css({opacity:1}).after('').each(function(){var b=a(this);b.width()>0&&b.height()>0?(j(e),e.click(k)):b.load(function(){j(e),e.click(k)})})}});var l=function(){i();var b=a("a.fluidbox.fluidbox-opened");b.length>0&&h(b)};return c.debounceResize?a(window).smartresize(l):a(window).resize(l),d}}(jQuery);
\ No newline at end of file
+!function(a){a.fn.fluidbox=function(b){var c=a.extend(!0,{viewportFill:.95,overlayColor:"rgba(255,255,255,.85)",debounceResize:!0,stackIndex:1e3,stackIndexDelta:10,closeTrigger:[{selector:".fluidbox-overlay",event:"click"},{selector:"document",event:"keyup",keyCode:27}]},b);c.stackIndex",{"class":"fluidbox-overlay",css:{"background-color":c.overlayColor,"z-index":c.stackIndex}});var f,d=this,e=a(window),g=function(){a(".fluidbox-opened").trigger("click")},h=function(a){var b=a.find("img"),c=a.find(".fluidbox-ghost"),d=e.scrollTop()-b.offset().top+.5*b.data("imgHeight")*(b.data("imgScale")-1)+.5*(e.height()-b.data("imgHeight")*b.data("imgScale")),f=.5*b.data("imgWidth")*(b.data("imgScale")-1)+.5*(e.width()-b.data("imgWidth")*b.data("imgScale"))-b.offset().left,g=b.data("imgScale");c.css({transform:"translate("+parseInt(10*f)/10+"px,"+parseInt(10*d)/10+"px) scale("+parseInt(1e3*g)/1e3+")"})},i=function(){d.each(function(){j(a(this))})},j=function(a){function i(){h.imgWidth=b.width(),h.imgHeight=b.height(),h.imgRatio=b.width()/b.height(),d.css({width:b.width(),height:b.height(),top:b.offset().top-g.offset().top,left:b.offset().left-g.offset().left}),h.imgScale=f>h.imgRatio?e.height()*c.viewportFill/b.height():e.width()*c.viewportFill/b.width()}if(f=e.width()/e.height(),a.hasClass("fluidbox")){var b=a.find("img"),d=a.find(".fluidbox-ghost"),g=a.find(".fluidbox-wrap"),h=b.data();i(),b.load(i)}},k=function(b){if(a(this).hasClass("fluidbox")){var d=a(this),e=a(this).find("img"),f=a(this).find(".fluidbox-ghost"),g=a(this).find(".fluidbox-wrap"),i={};0!==a(this).data("fluidbox-state")&&a(this).data("fluidbox-state")?(d.data("fluidbox-state",0).removeClass("fluidbox-opened").addClass("fluidbox-closed"),i.open&&window.clearTimeout(i.open),i.close=window.setTimeout(function(){a(".fluidbox-overlay").remove(),g.css({"z-index":c.stackIndex-c.stackIndexDelta})},10),a(".fluidbox-overlay").css({opacity:0}),f.css({transform:"translate(0,0) scale(1)",opacity:0}),e.css({opacity:1})):a("",{src:e.attr("src")}).load(function(){d.append($fbOverlay).data("fluidbox-state",1).removeClass("fluidbox-closed").addClass("fluidbox-opened"),i.close&&window.clearTimeout(i.close),i.hideGhost&&window.clearTimeout(i.hideGhost),i.open=window.setTimeout(function(){a(".fluidbox-overlay").css({opacity:1})},10),g.css({"z-index":c.stackIndex+c.stackIndexDelta}),f.css({"background-image":"url("+e.attr("src")+")",opacity:1}),e.css({opacity:0}),a("",{src:d.attr("href")}).load(function(){f.css({"background-image":"url("+d.attr("href")+")"})}),h(d)}),b.preventDefault()}};c.closeTrigger&&a.each(c.closeTrigger,function(b){var d=c.closeTrigger[b];"window"!=d.selector?"document"==d.selector?d.keyCode?a(document).on(d.event,function(a){a.keyCode==d.keyCode&&g()}):a(document).on(d.event,g):a(document).on(d.event,c.closeTrigger[b].selector,g):e.on(d.event,g)}),d.each(function(){if(a(this).is("a")&&1===a(this).children().length&&a(this).children().is("img")){var d=a("",{"class":"fluidbox-wrap",css:{"z-index":c.stackIndex-c.stackIndexDelta}}),e=a(this);e.addClass("fluidbox").wrapInner(d).find("img").css({opacity:1}).after('').each(function(){var b=a(this);b.width()>0&&b.height()>0?(j(e),e.click(k)):b.load(function(){j(e),e.click(k)})})}});var l=function(){i();var b=a("a.fluidbox.fluidbox-opened");b.length>0&&h(b)};return c.debounceResize?a(window).smartresize(l):a(window).resize(l),d}}(jQuery);
\ No newline at end of file