Pre-v1.4.4 updates

Removed .less file, because SCSS itself is sufficient and it is tiring to maintain two pre-processed stylesheets (which defeats the purpose at the first place). Bug fix for Safari, which is extremely stubborn with transformed elements (with background images) that are overlaid with absolutely positioned child elements (be it pseudo-element or otherwise). Might consider rolling back to a simpler solution once Safari stops acting up. Also updated demo to demonstrate the rendered markup after Fluidbox initialisation.
terrymun · Feb 2, 2015 · 2aad89d · 2aad89d
1 parent c235de0
commit 2aad89d
Show file tree

Hide file tree

Showing 8 changed files with 172 additions and 105 deletions.
diff --git a/css/fluidbox.css b/css/fluidbox.css
diff --git a/css/fluidbox.css.map b/css/fluidbox.css.map
diff --git a/css/fluidbox.less b/css/fluidbox.less
diff --git 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;
 }
diff --git 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
@@ -108,6 +108,37 @@ <h2 id="in-the-wild">In the wild</h2>
 			<p>In addition, Fluidbox has been successfully ported over to a <a href="https://wordpress.org/plugins/fluidbox/">WordPress plugin</a>. You can also learn how to <a href="http://sridharkatakam.com/medium-like-fluid-lightbox-wordpress-using-fluidbox/">implement it manually in WordPress</a>, too.</p>
 		</section>
 
+		<section>
+			<h2 id="how-does-it-work">How does it work?</h2>
+			<p>Fluidbox works by replacing your markup, which should be as follow:</p>
+			<pre class="language-markup"><code>&lt;a href=&quot;/path/to/image&quot; title=&quot;&quot;&gt;
+    &lt;img src=&quot;/path/to/image&quot; alt=&quot;&quot; title=&quot;&quot; /&gt;
+&lt;/a&gt;</code></pre>
+			<p>&hellip;into&hellip;</p>
+			<pre class="language-markup"><code>&lt;a href=&quot;/path/to/image&quot; data-fluidbox=&quot;&quot; class=&quot;fluidbox fluidbox-closed&quot; id=&quot;fluidbox-[n]&quot;&gt;
+    &lt;div class=&quot;fluidbox-wrap&quot; style=&quot;z-index: 990;&quot;&gt;
+        &lt;img src=&quot;/path/to/image&quot; alt=&quot;&quot; title=&quot;&quot; style=&quot;opacity: 1;&quot;&gt;
+        &lt;div class=&quot;fluidbox-ghost&quot; style=&quot;width: [w]; height: [h]; top: [t]; left: [l];&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/a&gt;</code></pre>
+			<p>&hellip;where:</p>
+			<ul>
+				<li><strong><code>[n]</code></strong> is an integer, unique to each Fluidbox instance on the page</li>
+				<li><strong><code>[w]</code></strong> is the computed width of the thumbnail, in pixels</li>
+				<li><strong><code>[h]</code></strong> is the computed height of the thumbnail, in pixels</li>
+				<li><strong><code>[t]</code></strong> is the computed offset, from the top and in pixels, of the thumbnail relative to its container</li>
+				<li><strong><code>[l]</code></strong> is the computed offset, from the left and in pixels, of the thumbnail relative to its container</li>
+			</ul>
+			<p>The replaced and rendered markup for each image targeted with Fluidbox can be presented in a three-dimensional way as follow:</p>
+			<figure id="fluidbox-3d">
+				<div class="canvas">
+					<a href="http://placehold.it/300x300/333333/ffffff/" data-fluidbox="" class="fluidbox fluidbox-closed" id="fluidbox-65536"><div class="fluidbox-wrap" style="z-index: 990;"><img src="http://placehold.it/300x300/333333/ffffff/&amp;text=Thumbnail" alt="" title="" style="opacity: 1;"><div class="fluidbox-ghost"></div></div></a>
+				</div>
+				<figcaption>Three-dimensional visualization of rendered Fluidbox markup.</figcaption>
+			</figure>
+			<p>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, <code>.fluidbox-ghost</code>, and toggles between two binary states, <em>open</em> or <em>closed</em>.</p>
+		</section>
+
 		<section>
 			<h2 id="usage-notes">Usage notes</h2>
 			<h3 id="dependencies">Dependencies</h3>
@@ -395,6 +426,25 @@ <h4 id="overlay-images">Overlay images</h4>
 					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 = [],