Merge branch 'develop'

Author: robneu

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.2.0
+
+The primary feature in this release is the addition of a visual loader and the automatic lightboxing of external images. In prior versions, only images from the WordPress host domain were lightboxed automatically. This caused some problems with people using a CDN as the URLs were treated as external.
+
+There have also been a handful of code improvements under the hood including:
+
+- Added gallery support for Jetpack Tiled Galleries
+- Improved URL handling to match more image instances automatically
+- Fixed a mistake in the textdomain path
+- Improved admin metabox markup (props @GaryJones)
+- Fixed a typo in the main stylesheet's script handle (props @GaryJones)
+
 ## 0.1.1
 
 Fixed a bug that caused all WordPress galleries to open in a light box. Now only galleries which have been set to link to the media attachment are opened using Featherlight.

README.md

@@ -4,46 +4,27 @@ An ultra lightweight jQuery lightbox for WordPress images and galleries.
 
 __Contributors:__ [Robert Neu](https://github.com/robneu)  
 __Requires:__ WordPress 4.1  
-__Tested up to:__ WordPress 4.1  
+__Tested up to:__ WordPress 4.2.2  
 __License:__ [GPL-2.0+](http://www.gnu.org/licenses/gpl-2.0.html)  
 
-## Description ##
-
-A WordPress plugin wrapper for the Featherlight jQuery lightbox plugin. This plugin automatically displays all standard WordPress images and galleries in a simple, minimalistic lightbox popup.
-
-Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlight's small footprint weights about 4kB – in total.
-
-For more information about the Featherlight script, check out their [GitHub plugin page](http://noelboss.github.io/featherlight/).
-
-## Installation ##
-
-### Upload ###
-
-1. Download the [latest release](https://github.com/wpsitecare/wp-featherlight/archive/master.zip) from GitHub.
-2. Go to the __Plugins → Add New__ screen in your WordPress admin panel and click the __Upload__ tab at the top.
-3. Upload the zipped archive.
-4. Click the __Activate Plugin__ link after installation completes.
+![Lightbox Popup](https://cloud.githubusercontent.com/assets/2184093/7943642/6885759a-092b-11e5-943c-c9211653a1e4.png)
 
-### Manual ###
+## Description ##
 
-1. Download the [latest release](https://github.com/wpsitecare/wp-featherlight/archive/master.zip) from GitHub.
-2. Unzip the archive.
-3. Copy the folder to `/wp-content/plugins/`.
-4. Go to the __Plugins__ screen in your WordPress admin panel and click the __Activate__ link under WP Featherlight.
+WP Featherlight is a WordPress plugin wrapper for the Featherlight jQuery lightbox plugin. When installed, the plugin will automatically display all standard WordPress images and galleries in a simple, minimalistic lightbox popup. It's also possible to load Videos, iframes, and ajax content using WP Featherlight by adding data attributes to your content. For more details on custom content loading, check out the [featherlight documentation](https://github.com/noelboss/featherlight/#usage).
 
-Read the Codex for more information about [installing plugins manually](http://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation).
+There are no settings for WP Featherlight, so you should be able to install it without needing to configure anything. In the event you don't want a lightbox on certain pages or posts, there is an option to disable it from within the post editor screen.
 
-### Git ###
+Here's an example of the plugin being used to load a large (5mb) external image in a standard WordPress post:
 
-Clone this repository in `/wp-content/plugins/`:
+![Loader in Action](https://cloud.githubusercontent.com/assets/2184093/7943635/5ba2155e-092b-11e5-8b97-be5ca8cc77d8.gif)
 
-`git clone https://github.com/wpsitecare/wp-featherlight.git`
+If you find a display problem, it may be related to your theme but please [open an issue](https://github.com/wpsitecare/wp-featherlight/issues) about it so we can look into it. For more information about the Featherlight script itself, check out their [GitHub plugin page](http://noelboss.github.io/featherlight/).
 
-Then go to the __Plugins__ screen in your WordPress admin panel and click the __Activate__ link under WP Featherlight.
+## Installation ##
 
-## Updating ##
+The best way to install this plugin is to either [download a copy](https://wordpress.org/plugins/wp-featherlight/) from the WordPress.org repository or search for "WP Featherlight" from your WordPress admin dashboard.
 
-There are a couple of plugins for managing updates to GitHub-hosted plugins. Either of these should notify you when this plugin is updated:
+## Contributing ##
 
-* [Git Plugin Updates](https://github.com/brainstormmedia/git-plugin-updates)
-* [GitHub Updater](https://github.com/afragen/github-updater)
+If you're a developer, the most current version can be found on the [develop branch](https://github.com/wpsitecare/wp-featherlight/tree/develop). Pull requests, issues, and any feedback is more than welcome. If you would like to contribute code, please make your pull requests against the develop branch rather than the master.

css/src/_featherlight.scss

@@ -1,3 +1,13 @@
+/**
+ * Featherlight Animations
+ * Version 0.2.0
+ *
+ * Copyright 2015, WP Site Care
+ * MIT Licensed.
+ */
+@import "parts/animation";
+
+
 /**
  * Featherlight - ultra slim jQuery lightbox
  * Version 1.2.3 - http://noelboss.github.io/featherlight/

css/src/parts/_animation.scss

@@ -0,0 +1,8 @@
+@keyframes featherlightLoader {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

css/src/parts/_base.scss

@@ -79,3 +79,27 @@
 	border-bottom: 0;
 	padding: 0;
 }
+
+/* Animated Loader
+--------------------------------------------- */
+.featherlight-loading {
+	.featherlight-content {
+		animation: featherlightLoader 1s infinite linear;
+		background: transparent;
+		border: 8px solid #909090;
+		border-left-color: #fff;
+		font-size: 10px;
+	}
+
+	.featherlight-content,
+	.featherlight-content:after {
+		border-radius: 50%;
+		width: 10em;
+		height: 10em;
+	}
+
+	.featherlight-close,
+	.featherlight-inner {
+		display: none;
+	}
+}

css/wp-featherlight.css

@@ -1,11 +1,41 @@
+/**
+ * Featherlight Animations
+ * Version 0.2.0
+ *
+ * Copyright 2015, WP Site Care
+ * MIT Licensed.
+ */
+@-webkit-keyframes featherlightLoader {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes featherlightLoader {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
 /**
  * Featherlight - ultra slim jQuery lightbox
  * Version 1.2.3 - http://noelboss.github.io/featherlight/
  *
  * Copyright 2015, Noel Raoul Bossart (http://www.noelboss.com)
  * MIT Licensed.
  */
-
 .featherlight {
 	background: transparent;
 	cursor: pointer;
@@ -93,14 +123,38 @@
 }
 
 
+/* Animated Loader
+--------------------------------------------- */
+
+.featherlight-loading .featherlight-content {
+	-webkit-animation: featherlightLoader 1s infinite linear;
+	animation: featherlightLoader 1s infinite linear;
+	background: transparent;
+	border: 8px solid #909090;
+	border-left-color: #fff;
+	font-size: 10px;
+}
+
+.featherlight-loading .featherlight-content,
+.featherlight-loading .featherlight-content:after {
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+	height: 10em;
+	width: 10em;
+}
+
+.featherlight-loading .featherlight-close,
+.featherlight-loading .featherlight-inner {
+	display: none;
+}
+
 /**
  * Featherlight Gallery - an extension for the ultra slim jQuery lightbox
  * Version 1.2.3 - http://noelboss.github.io/featherlight/
  *
  * Copyright 2015, Noel Raoul Bossart (http://www.noelboss.com)
  * MIT Licensed.
  */
-
 .featherlight-next,
 .featherlight-previous {
 	background: transparent;

css/wp-featherlight.min.css

@@ -759,7 +759,7 @@
 /**
  * WP Featherlight - Loader and helpers for the Featherlight WordPress plugin
  *
- * @version   Version 0.1.1
+ * @version   Version 0.2.0
  * @copyright Copyright 2015, Robert Neu (http://robneu.com)
  * @license   MIT
  */
@@ -775,10 +775,7 @@
 	 * @return mixed
 	 */
 	function testImages( index, element ) {
-		if ( element.hostname && element.hostname !== location.hostname ) {
-			return false;
-		}
-		return /(png|jpg|jpeg|gif|tiff|bmp)$/.test( $( element ).attr( 'href' ) );
+		return /(png|jpg|jpeg|gif|tiff|bmp)$/.test( $( element ).attr( 'href' ).toLowerCase() );
 	}
 
 	/**
@@ -800,17 +797,19 @@
 	 * @since  0.1.0
 	 * @return void
 	 */
-	function buildGalleries( index, value ) {
-		var galleryID    = $( value ).attr( 'id' ),
-			$galleryItem = $( '#' + galleryID + ' .gallery-item a' );
+	function buildGalleries( index, element ) {
+		var $galleryObj   = $( element ),
+			$galleryItems = $galleryObj.find( '.gallery-item a' );
+
+		if ( $galleryItems.length === 0 ) {
+			$galleryItems = $galleryObj.find( '.tiled-gallery-item a' );
+		}
 
-		if ( ! $galleryItem.attr( 'data-featherlight' ) ) {
+		if ( ! $galleryItems.attr( 'data-featherlight' ) ) {
 			return;
 		}
 
-		$galleryItem.featherlightGallery({
-			openSpeed: 300
-		});
+		$galleryItems.featherlightGallery();
 	}
 
 	/**
@@ -820,7 +819,7 @@
 	 * @return void
 	 */
 	function findGalleries() {
-		var $gallery = $( '.gallery' );
+		var $gallery = $( '.gallery, .tiled-gallery' );
 
 		if ( $gallery.length === 0 ) {
 			return;
@@ -840,7 +839,7 @@
 		findGalleries();
 	}
 
-	$(document).ready(function() {
+	$( document ).ready(function() {
 		wpFeatherlightInit();
 	});
 })( this, jQuery );