Added basic caption option

duncanmcdougall · Sep 22, 2013 · 6012f8f · 6012f8f
1 parent 6db7c12
commit 6012f8f
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 6 deletions.
diff --git a/demo/index_with_captions.html b/demo/index_with_captions.html
@@ -0,0 +1,70 @@
+<!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>
+
+  <ul class="gallery">
+    <li>
+      <a href="images/sample_a.jpg" data-caption="This is Venice. This is Venice. This is Venice. This is Venice. This is Venice">
+        <img src="images/sample_a_thumb.jpg" alt="Image">
+      </a>
+    </li>
+    <li>
+      <a href="images/sample_b.jpg" data-caption="A photo from London">
+        <img src="images/sample_b_thumb.jpg" alt="Image">
+      </a>
+    </li>
+    <li>
+      <a href="images/sample_c.jpg" data-caption="This one's from Brussels">
+        <img src="images/sample_c_thumb.jpg" alt="Image">
+      </a>
+    </li>
+    <li>
+      <a href="images/sample_d.jpg" data-caption="Another London snap">
+        <img src="images/sample_d_thumb.jpg" 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() {
+    $('.gallery a').lightbox(); 
+  });
+</script>
+</body>
+</html>
diff --git a/jquery.lightbox.css b/jquery.lightbox.css
@@ -30,6 +30,29 @@ body.blurred > * {
 	top: 48%;
 	left: 50%;
 }
+.lightbox-caption {
+	display: none;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	text-align: center;
+	z-index: 1000;
+	background: #000;
+	background: rgba(0,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;

diff --git a/jquery.lightbox.js b/jquery.lightbox.js
@@ -30,24 +30,26 @@
             image: null,
             current: null,
             locked: false,
-			selector: "#lightbox",
+            caption: null,
 
             init: function (items) {
                 plugin.items = items;
 				plugin.selector = "lightbox-"+Math.random().toString().replace('.','');
 
                 if (!plugin.lightbox) {
                     $('body').append(
-                      '<div id="lightbox" class='+plugin.selector+' style="display:none;">'+
+                      '<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>'
                     );
 
-                    plugin.lightbox = $("."+plugin.selector);
+                    plugin.lightbox = $("#lightbox");
+                    plugin.caption = $('.lightbox-caption', plugin.lightbox);
                 }
 
                 if (plugin.items.length > 1 && opts.nav) {
@@ -74,9 +76,20 @@
                     plugin.lightbox.append(img);
                     plugin.image = $("img", plugin.lightbox).hide();
                     plugin.resizeImage();
+                    plugin.setCaption();
                 });
             },
 
+            setCaption: function () {
+                var caption = $(plugin.current).data('caption');
+                if(!!caption && caption.length > 0) {
+                    plugin.caption.fadeIn();
+                    $('p', plugin.caption).text(caption);
+                }else{
+                    plugin.caption.hide();
+                }
+            },
+
             resizeImage: function () {
                 var ratio, wHeight, wWidth, iHeight, iWidth;
                 wHeight = $(window).height() - opts.margin;

diff --git a/jquery.lightbox.min.css b/jquery.lightbox.min.css
diff --git a/jquery.lightbox.min.js b/jquery.lightbox.min.js
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Responsive Lightbox",
+  "name": "Responsive-Lightbox",
   "title": "Responsive Lightbox",
   "description": "Lightweight, image only, responive lightbox",
   "author": {

diff --git a/readme.markdown b/readme.markdown
@@ -63,6 +63,15 @@ Options
 * 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.
 
+Captions
+------
+
+Add your captions as a data attribute to the anchor. e.g.
+
+```html
+    <a href="myimage.jpg" data-caption="This is a picture of a cat" >
+```
+
 Contributing
 ------