Updated to v1.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.
terrymun · May 21, 2014 · e8a885c · e8a885c
1 parent f336aee
commit e8a885c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 19 deletions.
diff --git 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   | <ul><li>**Bug fix:** Minimized white flash issue and fixed the stacking order bug introduced in v1.2.4&alpha;. 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).</li><li>**Update:** Included the updated licenses in `license.md` and `license.txt`.</li></ul> |
 | 1.2.6   | <ul><li>**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.</li></ul> |
 | 1.2.7   | <ul><li>**Bug fix:** Fixed issues when the `.one()` event is not propery unbound, especially after rapid, successive clicking.</li><li>**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.</li></ul> |
-| 1.3.0   |<ul><li>**Update:** Authored by [@hybernaut](https://github.com/hybernaut). Removes dependency on imagesLoaded for a speedier performance &mdash; 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.</li><li>**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`.</li></ul>
+| 1.3.0   | <ul><li>**Update:** Authored by [@hybernaut](https://github.com/hybernaut). Removes dependency on imagesLoaded for a speedier performance &mdash; 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.</li><li>**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`.</li></ul> |
+| 1.3.1   | <ul><li>**Update &amp; 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.</li></ul> |
 
 ## 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 `<link>` element in `<head>`.

diff --git 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;
-}
+	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;
+	}
diff --git 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);
diff --git a/jquery.fluidbox.min.js b/jquery.fluidbox.min.js