Syncing gh-pages

LICENSE.md

@@ -1,17 +1,23 @@
 # Fluidbox
 Replicating and improving the lightbox module seen on Medium with fluid transitions.
 
+## The MIT License (MIT)
 Copyright © 2014 [Terry Mun](http://terrymun.com)
 
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
-You should have received a copy of the GNU General Public License
-along with this program. If not, see [http://www.gnu.org/licenses/](http://www.gnu.org/licenses/)
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -15,7 +15,8 @@ Moreover, you can [visit the demo of this plugin](http://terrymun.github.io/Flui
 | 1.2.1   | Minor bug fixes |
 | 1.2.2   | <ul><li>**Bug fix:** Changed positioning of overlay, to ensure that it works in pages with absolutely- or relatively-positioned parent/wrapper elements with z-indexs specified</li><li>**Update:** Fluidbox is now available via [CDNJS](http://cdnjs.com/libraries/fluidbox/).</li></ul> |
 | 1.2.3   | <ul><li>**Bug fix:** Fixed the iamge switching issue when Fluidbox is closed, which causes two flashes of white. This is done by listening to the `transitionend` property, with a tiny hack.</li><li>**Update:** JS is minifised using [UglifyJS](http://marijnhaverbeke.nl/uglifyjs) instead of the [YUI compressor](http://refresh-sf.com/yui/), saving a wee bit more bandwidth for you.</li></ul> |
-| 1.2.4   | <ul><li>**Bug fix:** Removed the white flash issue by rearranging how overlay is appended to the DOM tree. Users can change the z-index in the CSS file freely (to suit their layout needs), as the script will store the original assigned z-index in a HTML5 `data-` attribute for manipulation, in order to restore the original z-index</li><li>**License notice:** Switched from GNU to MIT.</li></ul> |
+| 1.2.4&alpha; | **Warning: Buggy, alpha-build**<br /><ul><li>**Bug fix:** Removed the white flash issue by rearranging how overlay is appended to the DOM tree. Users can change the z-index in the CSS file freely (to suit their layout needs), as the script will store the original assigned z-index in a HTML5 `data-` attribute for manipulation, in order to restore the original z-index</li><li>**License notice:** Switched from GNU to MIT.</li></ul> |
+| 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 `stackingIndex`. 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> |
 
 ## 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>`.
@@ -61,10 +62,11 @@ Fluidbox can be configured according to your needs. The following options are av
 
 | Option           | Type      | Default value | Description                           |
 |------------------|-----------|---------------|---------------------------------------|
-| `viewportFill`   | Numerical | 0.95          | Dictates how much the longest axis of the image should fill the viewport. The default value will make the image fill 95% of the viewport dimension along its longest axis |
+| `viewportFill`   | Numerical | `0.95`        | Dictates how much the longest axis of the image should fill the viewport. The default value will make the image fill 95% of the viewport dimension along its longest axis |
 | `overlayColor`   | String    | `rgba(255,255,255,.85)` | Sets the `background-color` property of Fluidbox overlay. Defaults to white with an opacity of 0.85. |
-| `debounceResize` | Boolean   | true          | Dictates if the `$(window).resize()` event should be debounced for performance reason. This feature leverages the [small snippet kindly provided by Paul Irish](http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/). |
-| `closeTrigger`   | Array     | *see below*  | Dictates what event triggers closing of an opened Fluidbox. The default setup binds the click handler to the overlay. |
+| `debounceResize` | Boolean   | `true`        | Dictates if the `$(window).resize()` event should be debounced for performance reason. This feature leverages the [small snippet kindly provided by Paul Irish](http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/). |
+| `closeTrigger`   | Array     | *see below*   | Dictates what event triggers closing of an opened Fluidbox. The default setup binds the click handler to the overlay. |
+| `stackingIndex`  | Integer   | `999`         | Determines how high up the z-index will all Fluildbox elements be. Leave this option as default, unless you have other relatively or absolutely positioned elements on the page that is messing with Fluidbox appearance. |
 
 #### Note on `closeTrigger` option
 The default setup will have the effect of binding the click event to the overlay, so that when user click on the overlay, the Fluidbox instance that is opened will be closed:

css/fluidbox.css

@@ -1,7 +1,5 @@
 .fluidbox {
 	outline: none;
-	position: relative;
-	z-index: 999;
 }
 #fluidbox-overlay {
 	cursor: pointer;
@@ -13,21 +11,18 @@
 	left: 0;
 	bottom: 0;
 	right: 0;
-	z-index: 1;
-	transition: all .25s ease-in-out;
+	transition: .25s ease-in-out;
 }
 .fluidbox-wrap {
 	background-position: center center;
 	background-size: cover;
 	margin: 0 auto;
 	position: relative;
-	z-index: 1000;
-	transition: all .25s ease-in-out;
+	transition: .25s ease-in-out;
 }
 .fluidbox-ghost {
 	background-size: cover;
 	background-position: center center;
 	position: absolute;
-	z-index: 2;
-	transition: all .25s ease-in-out;
+	transition: .25s ease-in-out;
 }

jquery.fluidbox.js

@@ -1,6 +1,6 @@
 // Fluidbox
 // Description: Replicating the seamless lightbox transition effect seen on Medium.com, with some improvements
-// Version: 1.2.4
+// Version: 1.2.5
 // Author: Terry Mun
 // Author URI: http://terrymun.com
 
@@ -47,6 +47,7 @@
 			viewportFill: 0.95,
 			overlayColor: 'rgba(255,255,255,.85)',
 			debounceResize: true,
+			stackIndex: 1000,
 			closeTrigger: [
 				{
 					selector: '#fluidbox-overlay',
@@ -64,7 +65,8 @@
 		$fbOverlay = $('<div />', {
 			id: 'fluidbox-overlay',
 			css: {
-				'background-color': settings.overlayColor
+				'background-color': settings.overlayColor,
+				'z-index': settings.stackIndex
 			}
 		});
 
@@ -172,12 +174,20 @@
 				// 3. The only child is an image element, <img>
 				if($(this).is('a') && $(this).children().length === 1 && $(this).children().is('img')) {
 
+					// Define wrap
+					var $fbInnerWrap = $('<div />', {
+						class: 'fluidbox-wrap',
+						css: {
+							'z-index': settings.stackIndex - 1
+						}
+					});
+
 					// Add class
 					$(this)
 					.addClass('fluidbox')
-					.wrapInner('<div class="fluidbox-wrap" />')
+					.wrapInner($fbInnerWrap)
 					.find('img')
-						.css({ opacity: 1})
+						.css({ opacity: 1 })
 						.after('<div class="fluidbox-ghost" />');
 				}
 			});
@@ -210,75 +220,77 @@
 					// Variables
 					var $activeFb	= $(this),
 						$img		= $(this).find('img'),
-						$ghost		= $(this).find('.fluidbox-ghost');
+						$ghost		= $(this).find('.fluidbox-ghost'),
+						$wrap       = $(this).find('.fluidbox-wrap');
 
 					if($(this).data('fluidbox-state') === 0 || !$(this).data('fluidbox-state')) {
 						// State: Closed
 						// Action: Open fluidbox
 
-						// What are we doing here:
-						// 1. Append overlay in the wrapper itself
-						// 2. Toggle fluidbox state with data attribute
-						// 3. Store original z-index with data attribute (so users can change z-index when they see fit in CSS file)
-						// 4. Class toggle
-						// 5. Change z-index to ensure correct stacking order
-						$(this)
-						.find('.fluidbox-wrap')
+						// Wait for ghost image to be loaded successfully first, then do the rest
+						$('<img />', {
+							src: $img.attr('src')
+						}).load(function () {
+							// What are we doing here:
+							// 1. Append overlay in fluidbox
+							// 2. Toggle fluidbox state with data attribute
+							// 3. Store original z-index with data attribute (so users can change z-index when they see fit in CSS file)
+							// 4. Class toggle
+							$activeFb
 							.append($fbOverlay)
-							.end()
-						.data('fluidbox-state', 1)
-						.data('zindex', $(this).css('z-index'))
-						.removeClass('fluidbox-closed')
-						.addClass('fluidbox-opened')
-						.css({ 'z-index': parseint($(this).css('z-index'))+1 });
+							.data('fluidbox-state', 1)
+							.removeClass('fluidbox-closed')
+							.addClass('fluidbox-opened');
 
-						// Show overlay
-						$('#fluidbox-overlay').css({ opacity: 1 });
+							// Change wrapper z-index, so it is above everything else
+							$wrap.css({ 'z-index': settings.stackIndex + 2 });
 
-						// Set thumbnail image source as background image first, preload later
-						$ghost.css({
-							'background-image': 'url('+$img.attr('src')+')',
-							opacity: 1
-						});
+							// Show overlay
+							$('#fluidbox-overlay').css({ opacity: 1 });
 
-						// Hide original image
-						$img.css({ opacity: 0 });
+							// Set thumbnail image source as background image first, preload later
+							$ghost.css({
+								'background-image': 'url('+$img.attr('src')+')',
+								opacity: 1
+							});
+
+							// Hide original image
+							$img.css({ opacity: 0 });
 
-						// Preload ghost image
-						var ghostImg = new Image();
-						ghostImg.onload = function (){
-							$ghost.css({ 'background-image': 'url('+$activeFb.attr('href')+')' });
-						};
-						ghostImg.src = $(this).attr('href');
+							// Preload ghost image
+							var ghostImg = new Image();
+							ghostImg.onload = function (){
+								$ghost.css({ 'background-image': 'url('+$activeFb.attr('href')+')' });
+							};
+							ghostImg.src = $activeFb.attr('href');
 
-						// Position Fluidbox
-						funcPositionFb($(this));
+							// Position Fluidbox
+							funcPositionFb($activeFb);
+						});
 
 					} else {
 						// State: Open
 						// Action: Close fluidbox
 
 						// Switch state
-						$(this)
+						$activeFb
 						.data('fluidbox-state', 0)
 						.removeClass('fluidbox-opened')
 						.addClass('fluidbox-closed');
 
 						// Hide and remove overlay
 						$('#fluidbox-overlay')
-						.css({ opacity: 0})
+						.css({ opacity: 0 })
 						.one('webkitTransitionEnd MSTransitionEnd oTransitionEnd otransitionend transitionend', function (e){
 							// 'transitionend' fires for EACH property transitioned. In order to make sure that it is only triggered once, we sniff for opacity change
 							if(e.originalEvent.propertyName == 'opacity') {
 								// Remove overlay and change stacking order back to original z-index, stored in data attribute
-								$(this)
-								.remove()
-								.parents('.fluidbox')
-									.css({ 'z-index': $activeFb.data('zindex') });
+								$(this).remove();
+								$wrap.css({ 'z-index': settings.stackIndex - 1 });
 							}
 						});
 
-						// Reverse animation on wrapped elements
+						// Reverse animation on wrapped elements, and restore stacking order
 						$ghost
 						.css({ 'transform': 'translate(0,0) scale(1)' })
 						.one('webkitTransitionEnd MSTransitionEnd oTransitionEnd otransitionend transitionend', function (e){