Merge pull request sebarmeli#35 from thirtysixthspan/master

Added id field in order to support multiple jail instances

README.md

@@ -34,6 +34,7 @@ The images in the viewport are loaded straight away after the DOM is ready. As s
 ## Config
 You can add additional configuration options when you initially call jail():
 
+- `id`          : unique identifier for this jail instance. - Default: `jail`
 - `timeout`     : number of msec after that the images will be loaded - Default: `10`
 - `effect`      : any jQuery effect that makes the images display (e.g. "fadeIn") - Default: `NULL`
 
@@ -130,6 +131,17 @@ Here are some examples on how to invoke jail() in order to have a better underst
 	});
 ```
 
+### Create multiple jail instances for various image collections. Required when asynchronously rendering templates that contain images that should also be jailed.
+
+```javascript
+	$(function(){
+		$('img.lazy').jail({id: 'page'});
+		$('#template').load('/serverside.html', function(){
+			$('#template img.lazy').jail({id: 'template'});
+		});
+	});
+```
+
 ## Demo
 
 You can view a few demo examples usign JAIL [here](https://github.com/sebarmeli/JAIL/tree/master/demo)

src/jail.js

@@ -38,6 +38,7 @@
 
 		// Defaults parameters
 		defaults = {
+			id : 'jail',
 			timeout : 1,
 			effect : false,
 			speed : 400,
@@ -121,7 +122,7 @@
 		} else {
 
 			// Event on the image itself
-			images.bind( options.event + '.jail', {options: options, images: images}, function(e) {
+			images.bind( options.event + '.' + options.id, {options: options, images: images}, function(e) {
 				var $img = $(this),
 					options = e.data.options,
 					images = e.data.images;
@@ -132,7 +133,7 @@
 				_loadImage( options, $img );
 
 				// Image has been loaded so there is no need to listen anymore
-				$(e.currentTarget).unbind( e.type + '.jail' );
+				$(e.currentTarget).unbind( e.type + '.' + options.id );
 			});
 		}
 	};
@@ -180,8 +181,8 @@
 
 		// Check if there are images to load
 		if (!!triggerElem && typeof triggerElem.bind === "function") {
-			triggerElem.bind( options.event + '.jail', {options:options, images : images}, _bufferedEventListener );
-			$window.bind( 'resize.jail', {options:options, images : images}, _bufferedEventListener );
+			triggerElem.bind( options.event + '.' + options.id, {options:options, images : images}, _bufferedEventListener );
+			$window.bind( 'resize.'+options.id, {options:options, images : images}, _bufferedEventListener );
 		}
 	}
 
@@ -237,7 +238,7 @@
 
 			//Unbind when there are no images
 			if ( _isAllImagesLoaded (currentStack) ) {
-				$(e.currentTarget).unbind( e.type + '.jail' );
+				$(e.currentTarget).unbind( e.type + '.' + options.id );
 				return;
 			} 
 			// When images are not in the viewport, let's load them when they become available
@@ -420,4 +421,4 @@
 	};
 
 	return $.jail;
-}));
+}));