Refactored code to support multiple instances of lightbox on the same…

… page, each with unique options. Most lightbox methods are now private. Keyboard events are handled using jquery. Fixed bug: keyboard navigation doesn't work correctly with loopImages true. Fixed bug: imageClickClose doesn't have effect on single image lightbox. Added support for JSON. Lightbox images can now be supplied via jsonData option, accepts array of objects in JSON notation ({url, title}). How this works can be seen in the included examples (index.html). Added public method $.fn.lightbox.parseJsonData. Takes JSON data from jsonData parameter and converts it into imageArray for use internally. Can be overridden to support alternate JSON scheme or even data formats other than JSON. Signed-off-by: Warren Krewenki <krewenki@gmail.com>
corgibytes · Mar 24, 2009 · 63ac577 · 63ac577
1 parent 93906db
commit 63ac577
Show file tree

Hide file tree

Showing 2 changed files with 399 additions and 349 deletions.
diff --git a/index.html b/index.html
@@ -3,15 +3,39 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <head>
 
-	<title>jQuery Lightbox v0.5 | Test Page</title>
+	<title>jQuery Lightbox | Test Page</title>
 
 	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
 	<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
 	<script src="jquery.lightbox.js" type="text/javascript"></script>
 	<script>
-		$(document).ready(function(){
-			$(".lightbox").lightbox({fitToScreen: true});
+		$(document).ready(function(){
+		    base_url = document.location.href.substring(0, document.location.href.indexOf('index.html'), 0);
+
+			$(".lightbox").lightbox({
+			    fitToScreen: true,
+			    imageClickClose: false
+		    });
+
+			$(".lightbox-2").lightbox({
+			    fitToScreen: true
+		    });
+
+			$(".lightbox-json").lightbox({
+			    fitToScreen: true,
+			    jsonData: new Array(
+			        {url: base_url + 'images/image-0.jpg', title: 'Image 1 loaded using JSON data' },
+			        {url: base_url + 'images/image-1.jpg', title: 'Image 2 loaded using JSON data' },
+			        {url: base_url + 'images/image-2.jpg', title: 'Image 3 loaded using JSON data' },
+			        {url: base_url + 'images/image-3.jpg', title: 'Image 4 loaded using JSON data' }
+		        ),
+		        loopImages: true,
+		        imageClickClose: false,
+		        disableNavbarLinks: true
+		    });
+
+
 		});
 
 	</script>
@@ -31,11 +55,14 @@ <h1><a href="http://warren.mesozen.com">jQuery Lightbox <em>v0.5</em></a></h1>
 <h2>Example 1: Single Image</h2>
 <a href="images/image-0.jpg" class="lightbox" title="Cape Breton Island"><img src="images/thumb-0.jpg" width="100" height="40" alt="" /></a>
 
-<h2>Example Two: Series</h2>
-<a href="images/image-1.jpg" class="lightbox" rel="flowers" title="jQuery Lightbox Sample Image"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
-<a href="images/image-2.jpg" class="lightbox" rel="flowers" title="Photo by Steven Pinker"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
-<a href="images/image-3.jpg" class="lightbox" rel="flowers" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
-
+<h2>Example 2: Series</h2>
+<a href="images/image-1.jpg" class="lightbox-2" rel="flowers" title="jQuery Lightbox Sample Image"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
+<a href="images/image-2.jpg" class="lightbox-2" rel="flowers" title="Photo by Steven Pinker"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
+<a href="images/image-3.jpg" class="lightbox-2" rel="flowers" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
+
+<h2>Example 3: Images loaded using jsonData parameter (thumbnails are static)</h2>
+<a href="images/image-0.jpg" class="lightbox-json" title="Cape Breton Island"><img src="images/thumb-0.jpg" width="100" height="40" alt="" /></a>
+<a href="images/image-3.jpg" class="lightbox-json" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
 
 <h2>How to Use:</h2>
 <h3>Part 1 - Setup</h3>