Unique ID assigned to each lightbox fixes configuration differences w…

…hen multiple groups on a single page. Now using .lightbox rather than #lightbox for CSS.

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>

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;

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;
                     }