From a89b7e82b0f620bf7000fd2368b060e335cd480f Mon Sep 17 00:00:00 2001
From: Duncan McDougall <duncanmcdougall@duncanmgallsmbp.home>
Date: Sun, 28 Sep 2014 22:06:08 +0100
Subject: [PATCH] Unique ID assigned to each lightbox fixes configuration
 differences when multiple groups on a single page. Now using .lightbox rather
 than #lightbox for CSS.

---
 demo/groups.html        | 4 ++--
 jquery.lightbox.css     | 4 ++--
 jquery.lightbox.js      | 8 ++++----
 jquery.lightbox.min.css | 2 +-
 jquery.lightbox.min.js  | 2 +-
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/demo/groups.html b/demo/groups.html
index 172f129..636465b 100644
--- a/demo/groups.html
+++ b/demo/groups.html
@@ -37,7 +37,7 @@ <h2>Group 1</h2>
     <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>
+  <h2>Group 2 - No Nav</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>
@@ -59,7 +59,7 @@ <h2>Group 3</h2>
   // Initiate Lightbox
   $(function() {
 	$('.gallery1 a').lightbox(); 
-	$('.gallery2 a').lightbox(); 
+	$('.gallery2 a').lightbox({ nav : false }); 
 	$('.gallery3 a').lightbox(); 
   });
 </script>
diff --git a/jquery.lightbox.css b/jquery.lightbox.css
index 86f4e22..25e4332 100644
--- a/jquery.lightbox.css
+++ b/jquery.lightbox.css
@@ -1,4 +1,4 @@
-#lightbox {
+.lightbox {
 	cursor: pointer;
 	position: fixed;
 	width: 100%;
@@ -11,7 +11,7 @@
 	-webkit-filter: none !important;
 	z-index: 9997;
 }
-#lightbox img {
+.lightbox img {
 	display: block;
 	position: absolute;
 	border: 5px solid #fff;
diff --git a/jquery.lightbox.js b/jquery.lightbox.js
index f4d0897..a31b68a 100644
--- a/jquery.lightbox.js
+++ b/jquery.lightbox.js
@@ -35,10 +35,10 @@
             init: function (items) {
                 plugin.items = items;
 				plugin.selector = "lightbox-"+Math.random().toString().replace('.','');
-
+                var id = 'lightbox-' + Math.floor((Math.random() * 100000) + 1);
                 if (!plugin.lightbox) {
                     $('body').append(
-                      '<div id="lightbox" style="display:none;">'+
+                      '<div id="'+id+'" class="lightbox" style="display:none;">'+
                       '<a href="#" class="lightbox-close lightbox-button"></a>' +
                       '<div class="lightbox-nav">'+
                       '<a href="#" class="lightbox-previous lightbox-button"></a>' +
@@ -48,7 +48,7 @@
                       '</div>'
                     );
 
-                    plugin.lightbox = $("#lightbox");
+                    plugin.lightbox = $("#"+id);
                     plugin.caption = $('.lightbox-caption', plugin.lightbox);
                 }
 
@@ -145,7 +145,7 @@
 
             bindEvents: function () {
                 $(plugin.items).click(function (e) {
-                    if(!$("#lightbox").is(":visible") && ($(window).width() < opts.minSize || $(window).height() < opts.minSize)) {
+                    if(!plugin.lightbox.is(":visible") && ($(window).width() < opts.minSize || $(window).height() < opts.minSize)) {
                         $(this).attr("target", "_blank");
                         return;
                     }
diff --git a/jquery.lightbox.min.css b/jquery.lightbox.min.css
index f32791a..5064df9 100644
--- a/jquery.lightbox.min.css
+++ b/jquery.lightbox.min.css
@@ -1 +1 @@
-#lightbox{cursor:pointer;position:fixed;width:100%;height:100%;top:0;left:0;background:#000;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);background:rgba(0,0,0,.7);-webkit-filter:none!important;z-index:9997;}#lightbox img{display:block;position:absolute;border:5px solid #fff;box-shadow:0 0 20px #000;border-radius:1px}body.blurred>*{-webkit-filter:blur(2px);-webkit-transform:translate3d(0,0,0)}.lightbox-loading{background:url(loading.gif) center center no-repeat;width:31px;height:31px;margin:-16px 0 0 -16px;position:absolute;top:48%;left:50%}.lightbox-caption{display:none;position:absolute;left:0;bottom:0;width:100%;text-align:center;z-index:9998;background:#000;background:rgba(0,0,0,.7)}.lightbox-caption p{margin:0 auto;max-width:70%;display:inline-block;*display:inline;*zoom:1;padding:10px;color:#fff;font-size:12px;line-height:18px}.lightbox-button{position:absolute;z-index:9999;background:no-repeat center center;width:32px;height:32px;opacity:.4;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;transition:all .3s}.lightbox-button:hover,.lightbox-button:focus{opacity:1;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}.lightbox-close{right:10px;top:10px;background-image:url(close.png)}.lightbox-next{right:10px;top:48%;background-image:url(next.png)}.lightbox-previous{left:10px;top:48%;background-image:url(previous.png)}
+.lightbox{cursor:pointer;position:fixed;width:100%;height:100%;top:0;left:0;background:#000;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4T2NkYGDYDMRkA8ZRAxhGw4BhNAyA+WAYpAMAIFgLQfO9BoEAAAAASUVORK5CYII=);background:rgba(0,0,0,.7);-webkit-filter:none!important;z-index:9997}.lightbox img{display:block;position:absolute;border:5px solid #fff;box-shadow:0 0 20px #000;border-radius:1px}body.blurred>*{-webkit-filter:blur(2px);-webkit-transform:translate3d(0,0,0)}.lightbox-loading{background:url(loading.gif) center center no-repeat;width:31px;height:31px;margin:-16px 0 0 -16px;position:absolute;top:48%;left:50%}.lightbox-caption{display:none;position:absolute;left:0;bottom:0;width:100%;text-align:center;z-index:9998;background:#000;background:rgba(0,0,0,.7)}.lightbox-caption p{margin:0 auto;max-width:70%;display:inline-block;*display:inline;*zoom:1;padding:10px;color:#fff;font-size:12px;line-height:18px}.lightbox-button{position:absolute;z-index:9999;background:no-repeat center center;width:32px;height:32px;opacity:.4;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;transition:all .3s}.lightbox-button:hover,.lightbox-button:focus{opacity:1;-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)}.lightbox-close{right:10px;top:10px;background-image:url(close.png)}.lightbox-next{right:10px;top:48%;background-image:url(next.png)}.lightbox-previous{left:10px;top:48%;background-image:url(previous.png)}
\ No newline at end of file
diff --git a/jquery.lightbox.min.js b/jquery.lightbox.min.js
index 2cd311e..9c41aeb 100644
--- a/jquery.lightbox.min.js
+++ b/jquery.lightbox.min.js
@@ -10,4 +10,4 @@
  * minSize - int - default 0. Min window width or height to open lightbox. Below threshold will open image in a new tab.
  *
  */
-!function(a){"use strict";a.fn.lightbox=function(b){var c={margin:50,nav:!0,blur:!0,minSize:0},d={items:[],lightbox:null,image:null,current:null,locked:!1,caption:null,init:function(b){d.items=b,d.selector="lightbox-"+Math.random().toString().replace(".",""),d.lightbox||(a("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 href="#" class="lightbox-caption"><p></p></div></div>'),d.lightbox=a("#lightbox"),d.caption=a(".lightbox-caption",d.lightbox)),d.items.length>1&&c.nav?a(".lightbox-nav",d.lightbox).show():a(".lightbox-nav",d.lightbox).hide(),d.bindEvents()},loadImage:function(){c.blur&&a("body").addClass("blurred"),a("img",d.lightbox).remove(),d.lightbox.fadeIn("fast").append('<span class="lightbox-loading"></span>');var b=a('<img src="'+a(d.current).attr("href")+'" draggable="false">');a(b).load(function(){a(".lightbox-loading").remove(),d.lightbox.append(b),d.image=a("img",d.lightbox).hide(),d.resizeImage(),d.setCaption()})},setCaption:function(){var b=a(d.current).data("caption");b&&b.length>0?(d.caption.fadeIn(),a("p",d.caption).text(b)):d.caption.hide()},resizeImage:function(){var b,e,f,g,h;e=a(window).height()-c.margin,f=a(window).outerWidth(!0)-c.margin,d.image.width("").height(""),g=d.image.height(),h=d.image.width(),h>f&&(b=f/h,h=f,g=Math.round(g*b)),g>e&&(b=e/g,g=e,h=Math.round(h*b)),d.image.width(h).height(g).css({top:(a(window).height()-d.image.outerHeight())/2+"px",left:(a(window).width()-d.image.outerWidth())/2+"px"}).show(),d.locked=!1},getCurrentIndex:function(){return a.inArray(d.current,d.items)},next:function(){return d.locked?!1:(d.locked=!0,d.getCurrentIndex()>=d.items.length-1?a(d.items[0]).click():a(d.items[d.getCurrentIndex()+1]).click(),void 0)},previous:function(){return d.locked?!1:(d.locked=!0,d.getCurrentIndex()<=0?a(d.items[d.items.length-1]).click():a(d.items[d.getCurrentIndex()-1]).click(),void 0)},bindEvents:function(){a(d.items).click(function(b){if(!a("#lightbox").is(":visible")&&(a(window).width()<c.minSize||a(window).height()<c.minSize))return a(this).attr("target","_blank"),void 0;var e=a(this)[0];b.preventDefault(),d.current=e,d.loadImage(),a(document).on("keydown",function(a){27===a.keyCode&&d.close(),39===a.keyCode&&d.next(),37===a.keyCode&&d.previous()})}),d.lightbox.on("click",function(a){this===a.target&&d.close()}),a(d.lightbox).on("click",".lightbox-previous",function(){return d.previous(),!1}),a(d.lightbox).on("click",".lightbox-next",function(){return d.next(),!1}),a(d.lightbox).on("click",".lightbox-close",function(){return d.close(),!1}),a(window).resize(function(){d.image&&d.resizeImage()})},close:function(){a(document).off("keydown"),a(d.lightbox).fadeOut("fast"),a("body").removeClass("blurred")}};a.extend(c,b),d.init(this)}}(jQuery);
\ No newline at end of file
+!function(a){"use strict";a.fn.lightbox=function(b){var c={margin:50,nav:!0,blur:!0,minSize:0},d={items:[],lightbox:null,image:null,current:null,locked:!1,caption:null,init:function(b){d.items=b,d.selector="lightbox-"+Math.random().toString().replace(".","");var e="lightbox-"+Math.floor(1e5*Math.random()+1);d.lightbox||(a("body").append('<div id="'+e+'" class="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 href="#" class="lightbox-caption"><p></p></div>'+"</div>"),d.lightbox=a("#"+e),d.caption=a(".lightbox-caption",d.lightbox)),d.items.length>1&&c.nav?a(".lightbox-nav",d.lightbox).show():a(".lightbox-nav",d.lightbox).hide(),d.bindEvents()},loadImage:function(){c.blur&&a("body").addClass("blurred"),a("img",d.lightbox).remove(),d.lightbox.fadeIn("fast").append('<span class="lightbox-loading"></span>');var b=a('<img src="'+a(d.current).attr("href")+'" draggable="false">');a(b).load(function(){a(".lightbox-loading").remove(),d.lightbox.append(b),d.image=a("img",d.lightbox).hide(),d.resizeImage(),d.setCaption()})},setCaption:function(){var b=a(d.current).data("caption");b&&b.length>0?(d.caption.fadeIn(),a("p",d.caption).text(b)):d.caption.hide()},resizeImage:function(){var b,e,f,g,h;e=a(window).height()-c.margin,f=a(window).outerWidth(!0)-c.margin,d.image.width("").height(""),g=d.image.height(),h=d.image.width(),h>f&&(b=f/h,h=f,g=Math.round(g*b)),g>e&&(b=e/g,g=e,h=Math.round(h*b)),d.image.width(h).height(g).css({top:(a(window).height()-d.image.outerHeight())/2+"px",left:(a(window).width()-d.image.outerWidth())/2+"px"}).show(),d.locked=!1},getCurrentIndex:function(){return a.inArray(d.current,d.items)},next:function(){return d.locked?!1:(d.locked=!0,d.getCurrentIndex()>=d.items.length-1?a(d.items[0]).click():a(d.items[d.getCurrentIndex()+1]).click(),void 0)},previous:function(){return d.locked?!1:(d.locked=!0,d.getCurrentIndex()<=0?a(d.items[d.items.length-1]).click():a(d.items[d.getCurrentIndex()-1]).click(),void 0)},bindEvents:function(){a(d.items).click(function(b){if(!d.lightbox.is(":visible")&&(a(window).width()<c.minSize||a(window).height()<c.minSize))return a(this).attr("target","_blank"),void 0;var e=a(this)[0];b.preventDefault(),d.current=e,d.loadImage(),a(document).on("keydown",function(a){27===a.keyCode&&d.close(),39===a.keyCode&&d.next(),37===a.keyCode&&d.previous()})}),d.lightbox.on("click",function(a){this===a.target&&d.close()}),a(d.lightbox).on("click",".lightbox-previous",function(){return d.previous(),!1}),a(d.lightbox).on("click",".lightbox-next",function(){return d.next(),!1}),a(d.lightbox).on("click",".lightbox-close",function(){return d.close(),!1}),a(window).resize(function(){d.image&&d.resizeImage()})},close:function(){a(document).off("keydown"),a(d.lightbox).fadeOut("fast"),a("body").removeClass("blurred")}};a.extend(c,b),d.init(this)}}(jQuery);
\ No newline at end of file