Can now lightbox multiple lightbox groups on same page

See demo.
duncanmcdougall · Jul 24, 2013 · e9c1952 · e9c1952
1 parent 50fa2a5
commit e9c1952
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 8 deletions.
diff --git a/demo/groups.html 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>
diff --git 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
diff --git a/readme.markdown b/readme.markdown
@@ -24,15 +24,22 @@ 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>
 
 <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