From e9c19525cdaaa3117b9523496453dddf6c5d0783 Mon Sep 17 00:00:00 2001
From: Duncan McDougall <duncanjmcdougall@gmail.com>
Date: Wed, 24 Jul 2013 18:07:33 +0100
Subject: [PATCH] Can now lightbox multiple lightbox groups on same page

See demo.
---
 demo/groups.html       | 62 ++++++++++++++++++++++++++++++++++++++++++
 jquery.lightbox.js     | 10 ++++---
 jquery.lightbox.min.js | 14 +++++++++-
 readme.markdown        | 13 +++++++--
 4 files changed, 91 insertions(+), 8 deletions(-)
 create mode 100644 demo/groups.html
diff --git a/demo/groups.html b/demo/groups.html
new file mode 100644
index 0000000..9f03c9d
--- /dev/null
+++ b/demo/groups.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="../jquery.lightbox.css">
+  <style type="text/css">
+    body {
+      font-family: sans-serif;
+      font-size: 1rem;
+      color: #333;
+    }
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .gallery {
+      list-style: none;
+      overflow: hidden;
+      padding: 0;
+      margin: 0;
+    }
+    .gallery li {
+      float: left;
+      margin: 4px;
+    }
+  </style>
+</head>
+<body>
+<div class="container">
+  <h1>Responsive Lightbox</h1>
+  <h2>Group 1</h2>
+  <ul class="gallery gallery1">
+    <li><a href="images/sample_a.jpg"><img src="images/sample_a_thumb.jpg" alt="Image"></a></li>
+    <li><a href="images/sample_b.jpg"><img src="images/sample_b_thumb.jpg" alt="Image"></a></li>
+    <li><a href="images/sample_c.jpg"><img src="images/sample_c_thumb.jpg" alt="Image"></a></li>
+    <li><a href="images/sample_d.jpg"><img src="images/sample_d_thumb.jpg" alt="Image"></a></li>
+  </ul>
+  <h2>Group 2</h2>
+  <ul class="gallery gallery2">
+    <li><a href="http://lorempixel.com/500/500/nature/1/"><img src="http://lorempixel.com/150/150/nature/1/" alt="Image"></a></li>
+    <li><a href="http://lorempixel.com/500/900/nature/2/"><img src="http://lorempixel.com/150/150/nature/2/" alt="Image"></a></li>
+    <li><a href="http://lorempixel.com/1024/768/nature/3/"><img src="http://lorempixel.com/150/150/nature/3/" alt="Image"></a></li>
+    <li><a href="http://lorempixel.com/900/1200/nature/4/"><img src="http://lorempixel.com/150/150/nature/4/" alt="Image"></a></li>
+  </ul>
+  <footer>
+    <p>Lightbox Plugin and photos by <a href="http://www.twitter.com/duncanmcdougall">Duncan McDougall</a></p>
+  </footer>
+</div>
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+<script src="../jquery.lightbox.js"></script>
+<script>
+  // Initiate Lightbox
+  $(function() {
+    $('.gallery1 a').lightbox(); 
+	$('.gallery2 a').lightbox(); 
+  });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/jquery.lightbox.js b/jquery.lightbox.js
index a477393..e05a63a 100644
--- a/jquery.lightbox.js
+++ b/jquery.lightbox.js
@@ -30,13 +30,15 @@
             image: null,
             current: null,
             locked: false,
-
+			selector: "#lightbox",
+			
             init: function (items) {
                 plugin.items = items;
+				plugin.selector = "lightbox-"+Math.random().toString().replace('.','');
 
                 if (!plugin.lightbox) {
                     $('body').append(
-                      '<div id="lightbox" style="display:none;">'+
+                      '<div id="lightbox" class='+plugin.selector+' style="display:none;">'+
                       '<a href="#" class="lightbox-close lightbox-button"></a>' +
                       '<div class="lightbox-nav">'+
                       '<a href="#" class="lightbox-previous lightbox-button"></a>' +
@@ -45,7 +47,7 @@
                       '</div>'
                     );
 
-                    plugin.lightbox = $("#lightbox");
+                    plugin.lightbox = $("."+plugin.selector);
                 }
 
                 if (plugin.items.length > 1 && opts.nav) {
@@ -191,7 +193,7 @@
 
             close: function () {
                 $(document).off('keydown'); // Unbind all key events each time the lightbox is closed
-                $('#lightbox').fadeOut('fast');
+                $(plugin.lightbox).fadeOut('fast');
                 $('body').removeClass('blurred');
             }
         };
diff --git a/jquery.lightbox.min.js b/jquery.lightbox.min.js
index aff3184..9fb59cf 100644
--- a/jquery.lightbox.min.js
+++ b/jquery.lightbox.min.js
@@ -10,4 +10,16 @@
  * minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab.
  *
  */
-(function(i){"use strict";i.fn.lightbox=function(t){var e={margin:50,nav:!0,blur:!0,minSize:0},n={items:[],lightbox:null,image:null,current:null,locked:!1,init:function(t){n.items=t,n.lightbox||(i("body").append('<div id="lightbox" style="display:none;"><a href="#" class="lightbox-close lightbox-button"></a><div class="lightbox-nav"><a href="#" class="lightbox-previous lightbox-button"></a><a href="#" class="lightbox-next lightbox-button"></a></div></div>'),n.lightbox=i("#lightbox")),n.items.length>1&&e.nav?i(".lightbox-nav",n.lightbox).show():i(".lightbox-nav",n.lightbox).hide(),n.bindEvents()},loadImage:function(){e.blur&&i("body").addClass("blurred"),i("img",n.lightbox).remove(),n.lightbox.fadeIn("fast").append('<span class="lightbox-loading"></span>');var t=i('<img src="'+i(n.current).attr("href")+'" draggable="false">');i(t).load(function(){i(".lightbox-loading").remove(),n.lightbox.append(t),n.image=i("img",n.lightbox).hide(),n.resizeImage()})},resizeImage:function(){var t,o,l,r,g;o=i(window).height()-e.margin,l=i(window).outerWidth(!0)-e.margin,n.image.width("").height(""),r=n.image.height(),g=n.image.width(),g>l&&(t=l/g,g=l,r=Math.round(r*t)),r>o&&(t=o/r,r=o,g=Math.round(g*t)),n.image.width(g).height(r).css({top:(i(window).height()-n.image.outerHeight())/2+"px",left:(i(window).width()-n.image.outerWidth())/2+"px"}).show(),n.locked=!1},getCurrentIndex:function(){return i.inArray(n.current,n.items)},next:function(){return n.locked?!1:(n.locked=!0,n.getCurrentIndex()>=n.items.length-1?i(n.items[0]).click():i(n.items[n.getCurrentIndex()+1]).click(),void 0)},previous:function(){return n.locked?!1:(n.locked=!0,0>=n.getCurrentIndex()?i(n.items[n.items.length-1]).click():i(n.items[n.getCurrentIndex()-1]).click(),void 0)},bindEvents:function(){i(n.items).click(function(t){if(!i("#lightbox").is(":visible")&&(i(window).width()<e.minSize||i(window).height()<e.minSize))return i(this).attr("target","_blank"),void 0;var o=i(this)[0];t.preventDefault(),n.current=o,n.loadImage(),i(document).on("keydown",function(i){27===i.keyCode&&n.close(),39===i.keyCode&&n.next(),37===i.keyCode&&n.previous()})}),n.lightbox.on("click",function(i){this===i.target&&n.close()}),i(n.lightbox).on("click",".lightbox-previous",function(){return n.previous(),!1}),i(n.lightbox).on("click",".lightbox-next",function(){return n.next(),!1}),i(n.lightbox).on("click",".lightbox-close",function(){return n.close(),!1}),i(window).resize(function(){n.image&&n.resizeImage()})},close:function(){i(document).off("keydown"),i("#lightbox").fadeOut("fast"),i("body").removeClass("blurred")}};i.extend(e,t),n.init(this)}})(jQuery);
\ No newline at end of file
+ /*!
+ * jquery.lightbox.js
+ * https://github.com/duncanmcdougall/Responsive-Lightbox
+ * Copyright 2013 Duncan McDougall and other contributors; @license Creative Commons Attribution 2.5
+ *
+ * Options: 
+ * margin - int - default 50. Minimum margin around the image
+ * nav - bool - default true. enable navigation
+ * blur - bool - default true. Blur other content when open using css filter
+ * minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab.
+ *
+ */
+(function(e){"use strict";e.fn.lightbox=function(t){var n={margin:50,nav:true,blur:true,minSize:0};var r={items:[],lightbox:null,image:null,current:null,locked:false,selector:"#lightbox",init:function(t){r.items=t;r.selector="lightbox-"+Math.random().toString().replace(".","");if(!r.lightbox){e("body").append('<div id="lightbox" class='+r.selector+' style="display:none;">'+'<a href="#" class="lightbox-close lightbox-button"></a>'+'<div class="lightbox-nav">'+'<a href="#" class="lightbox-previous lightbox-button"></a>'+'<a href="#" class="lightbox-next lightbox-button"></a>'+"</div>"+"</div>");r.lightbox=e("."+r.selector)}if(r.items.length>1&&n.nav){e(".lightbox-nav",r.lightbox).show()}else{e(".lightbox-nav",r.lightbox).hide()}r.bindEvents()},loadImage:function(){if(n.blur){e("body").addClass("blurred")}e("img",r.lightbox).remove();r.lightbox.fadeIn("fast").append('<span class="lightbox-loading"></span>');var t=e('<img src="'+e(r.current).attr("href")+'" draggable="false">');e(t).load(function(){e(".lightbox-loading").remove();r.lightbox.append(t);r.image=e("img",r.lightbox).hide();r.resizeImage()})},resizeImage:function(){var t,i,s,o,u;i=e(window).height()-n.margin;s=e(window).outerWidth(true)-n.margin;r.image.width("").height("");o=r.image.height();u=r.image.width();if(u>s){t=s/u;u=s;o=Math.round(o*t)}if(o>i){t=i/o;o=i;u=Math.round(u*t)}r.image.width(u).height(o).css({top:(e(window).height()-r.image.outerHeight())/2+"px",left:(e(window).width()-r.image.outerWidth())/2+"px"}).show();r.locked=false},getCurrentIndex:function(){return e.inArray(r.current,r.items)},next:function(){if(r.locked){return false}r.locked=true;if(r.getCurrentIndex()>=r.items.length-1){e(r.items[0]).click()}else{e(r.items[r.getCurrentIndex()+1]).click()}},previous:function(){if(r.locked){return false}r.locked=true;if(r.getCurrentIndex()<=0){e(r.items[r.items.length-1]).click()}else{e(r.items[r.getCurrentIndex()-1]).click()}},bindEvents:function(){e(r.items).click(function(t){if(!e("#lightbox").is(":visible")&&(e(window).width()<n.minSize||e(window).height()<n.minSize)){e(this).attr("target","_blank");return}var i=e(this)[0];t.preventDefault();r.current=i;r.loadImage();e(document).on("keydown",function(e){if(e.keyCode===27){r.close()}if(e.keyCode===39){r.next()}if(e.keyCode===37){r.previous()}})});r.lightbox.on("click",function(e){if(this===e.target){r.close()}});e(r.lightbox).on("click",".lightbox-previous",function(){r.previous();return false});e(r.lightbox).on("click",".lightbox-next",function(){r.next();return false});e(r.lightbox).on("click",".lightbox-close",function(){r.close();return false});e(window).resize(function(){if(!r.image){return}r.resizeImage()})},close:function(){e(document).off("keydown");e(r.lightbox).fadeOut("fast");e("body").removeClass("blurred")}};e.extend(n,t);r.init(this)}})(jQuery)
\ No newline at end of file
diff --git a/readme.markdown b/readme.markdown
index 2d6e78f..2c8eacb 100644
--- a/readme.markdown
+++ b/readme.markdown
@@ -24,7 +24,10 @@ Usage
 </head>
 <body>
 <!-- Link to the image -->
-<a href="photo.jpg" rel="lightbox">Click me</a>
+<div class="gallery">
+<a href="photo1.jpg">Image 1</a>
+<a href="photo2.jpg">Image 2</a>
+</div>
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="lightbox.min.js"></script>
@@ -32,7 +35,11 @@ Usage
 <script>
  $(function()
  {
-    $('.lightbox').lightbox();
+    $('.gallery a').lightbox(); 
+	
+	// If you want seperate galleries on the same page
+	// just specify different class names. 
+	$('.gallery-2 a').lightbox();
  });
 </script>
 </body>
@@ -43,7 +50,7 @@ Options
 ------
 
 ```bash
-    $('.lightbox').lightbox({ margin: 20, nav: false, blur: true, minSize: 480 });
+    $('.gallery').lightbox({ margin: 20, nav: false, blur: true, minSize: 480 });
 ```
 
 * margin - int - default 50. Minimum margin around the image
