diff --git a/coffee/lightbox.coffee b/coffee/lightbox.coffee
index 757db86..6bbe187 100644
--- a/coffee/lightbox.coffee
+++ b/coffee/lightbox.coffee
@@ -67,10 +67,10 @@ class Lightbox
     @build()
 
 
-  # Loop through anchors and areamaps looking for rel attributes that contain 'lightbox'
-  # On clicking these, start lightbox.
+  # Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes
+  # that contain 'lightbox'. When these are clicked, start lightbox.
   enable: ->
-    $('body').on 'click', 'a[rel^=lightbox], area[rel^=lightbox]', (e) =>
+    $('body').on 'click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', (e) =>
       @start $(e.currentTarget)
       false
 
@@ -132,15 +132,23 @@ class Lightbox
     @album = []
     imageNumber = 0
 
-    if $link.attr('rel') == 'lightbox'
-      # If image is not part of a set
-      @album.push link: $link.attr('href'), title: $link.attr('title')
-    else
-      # Image is part of a set
-      for a, i in $( $link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]')
+    # Supporting both data-lightbox attribute and rel attribute implementations
+    dataLightboxValue = $link.attr 'data-lightbox'
+    if dataLightboxValue
+      for a, i in $( $link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]')
         @album.push link: $(a).attr('href'), title: $(a).attr('title')
         if $(a).attr('href') == $link.attr('href')
           imageNumber = i
+    else 
+      if $link.attr('rel') == 'lightbox'
+        # If image is not part of a set
+        @album.push link: $link.attr('href'), title: $link.attr('title')
+      else
+        # Image is part of a set
+        for a, i in $( $link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]')
+          @album.push link: $(a).attr('href'), title: $(a).attr('title')
+          if $(a).attr('href') == $link.attr('href')
+            imageNumber = i
 
     # Position lightbox
     $window = $(window)
diff --git a/css/screen.css b/css/screen.css
index db72bea..e4e7590 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -275,8 +275,13 @@ body {
   font-size: 14px;
 }
 
+/* line 141, ../sass/screen.sass */
+.lead {
+  font-size: 22px;
+}
+
 /* -- Examples -- */
-/* line 143, ../sass/screen.sass */
+/* line 146, ../sass/screen.sass */
 .image-row {
   *zoom: 1;
   margin-bottom: 20px;
@@ -288,7 +293,7 @@ body {
   clear: both;
 }
 
-/* line 147, ../sass/screen.sass */
+/* line 150, ../sass/screen.sass */
 .example-image-link {
   display: block;
   float: left;
@@ -305,17 +310,17 @@ body {
   -o-transition: all 0.1s ease-out;
   transition: all 0.1s ease-out;
 }
-/* line 155, ../sass/screen.sass */
+/* line 158, ../sass/screen.sass */
 .example-image-link:hover {
   border: 6px solid #00bfa8;
 }
 
-/* line 158, ../sass/screen.sass */
+/* line 161, ../sass/screen.sass */
 .last-example-image-link-in-set {
   margin-right: 0;
 }
 
-/* line 161, ../sass/screen.sass */
+/* line 164, ../sass/screen.sass */
 .example-image {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
@@ -325,7 +330,7 @@ body {
 }
 
 /* -- Sharing -- */
-/* line 166, ../sass/screen.sass */
+/* line 169, ../sass/screen.sass */
 .sharing {
   position: fixed;
   top: 20px;
@@ -334,12 +339,12 @@ body {
 
 /* content
  *----------------------------------------------- */
-/* line 174, ../sass/screen.sass */
+/* line 177, ../sass/screen.sass */
 .download-section {
   text-align: center;
 }
 
-/* line 177, ../sass/screen.sass */
+/* line 180, ../sass/screen.sass */
 .download-button {
   display: block;
   width: 300px;
@@ -364,53 +369,53 @@ body {
   display: table;
   clear: both;
 }
-/* line 187, ../sass/screen.sass */
+/* line 190, ../sass/screen.sass */
 .download-button:hover {
   border-color: #00bfa8;
   background-color: #444444;
 }
-/* line 190, ../sass/screen.sass */
+/* line 193, ../sass/screen.sass */
 .download-button .file {
   font-size: 36px;
   color: white;
   line-height: 1em;
 }
-/* line 194, ../sass/screen.sass */
+/* line 197, ../sass/screen.sass */
 .download-button .file .version {
   font-size: 24px;
   color: #00bfa8;
 }
 
-/* line 199, ../sass/screen.sass */
+/* line 202, ../sass/screen.sass */
 .changelog {
   margin-bottom: 0.5em;
 }
-/* line 201, ../sass/screen.sass */
+/* line 204, ../sass/screen.sass */
 .changelog li {
   list-style: none;
   padding: 0 0 0 14px;
   background: url(../img/bullet.gif) no-repeat 0 11px;
   color: #999999;
 }
-/* line 206, ../sass/screen.sass */
+/* line 209, ../sass/screen.sass */
 .changelog li .version {
   color: #88a616;
 }
-/* line 208, ../sass/screen.sass */
+/* line 211, ../sass/screen.sass */
 .changelog li .date {
   color: white;
 }
-/* line 210, ../sass/screen.sass */
+/* line 213, ../sass/screen.sass */
 .changelog .old {
   display: none;
 }
 
-/* line 213, ../sass/screen.sass */
+/* line 216, ../sass/screen.sass */
 .showOlderChanges {
   color: #999999;
 }
 
-/* line 217, ../sass/screen.sass */
+/* line 220, ../sass/screen.sass */
 .forums {
   float: left;
   margin: 0 40px 40px 0;
@@ -427,17 +432,17 @@ body {
   -o-transition: all 0.1s ease-out;
   transition: all 0.1s ease-out;
 }
-/* line 225, ../sass/screen.sass */
+/* line 228, ../sass/screen.sass */
 .forums:hover {
   border-color: #00bfa8;
   background-color: #444444;
 }
-/* line 228, ../sass/screen.sass */
+/* line 231, ../sass/screen.sass */
 .forums .speech {
   float: left;
   margin-right: 20px;
 }
-/* line 231, ../sass/screen.sass */
+/* line 234, ../sass/screen.sass */
 .forums .link {
   float: left;
   font-size: 36px;
@@ -445,12 +450,12 @@ body {
   color: white;
   line-height: 1.1em;
 }
-/* line 237, ../sass/screen.sass */
+/* line 240, ../sass/screen.sass */
 .forums .link .sub {
   color: #00bfa8;
 }
 
-/* line 240, ../sass/screen.sass */
+/* line 243, ../sass/screen.sass */
 .donate-button {
   border: 5px solid rgba(0, 0, 0, 0);
   -webkit-border-radius: 4px;
@@ -463,7 +468,7 @@ body {
   -o-transition: all 0.1s ease-out;
   transition: all 0.1s ease-out;
 }
-/* line 244, ../sass/screen.sass */
+/* line 247, ../sass/screen.sass */
 .donate-button:hover {
   background-color: #444444;
   border-color: #00bfa8;
diff --git a/index.html b/index.html
index 399a436..354449a 100644
--- a/index.html
+++ b/index.html
@@ -30,8 +30,7 @@
 				<a href="https://twitter.com/intent/user?screen_name=lokesh">Follow me on Twitter</a>
 			</span>
 		</p>
-
-		<p>
+		<p class="lead">
 			Lightbox is a script used to overlay images on top of the current page. It's a <em>snap to setup</em> and works on <em>all modern browsers</em>.
 		</p>
 	</section>
@@ -43,18 +42,18 @@
 
 		<h3>Single image</h3>
 		<div class="image-row">
-			<a class="example-image-link" href="img/examples/image-1.jpg" rel="lightbox"><img class="example-image" src="img/examples/thumb-1.jpg" alt="thumb-1" width="150" height="150"/></a>
-			<a class="example-image-link" href="img/examples/image-2.jpg" rel="lightbox" title="Optional caption."><img class="example-image" src="img/examples/thumb-2.jpg" alt="thumb-1" width="150" height="150"/></a>
+			<a class="example-image-link" href="img/examples/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/examples/thumb-1.jpg" alt="thumb-1" width="150" height="150"/></a>
+			<a class="example-image-link" href="img/examples/image-2.jpg" data-lightbox="example-2" title="Optional caption."><img class="example-image" src="img/examples/thumb-2.jpg" alt="thumb-1" width="150" height="150"/></a>
 		</div>
 
 		<h3 style="clear: both;">Image set</h3>
 
 		<div class="image-row">
 			<div class="image-set">
-				<a class="example-image-link" href="img/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img class="example-image" src="img/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
-				<a class="example-image-link" href="img/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key."><img class="example-image" src="img/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
-				<a class="example-image-link" href="img/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img class="example-image" src="img/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
-				<a class="example-image-link last-example-image-link-in-set" href="img/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img class="example-image" src="img/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
+				<a class="example-image-link" href="img/examples/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward."><img class="example-image" src="img/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150"/></a>
+				<a class="example-image-link" href="img/examples/image-4.jpg" data-lightbox="example-set" title="Alternately you can press the right arrow key."><img class="example-image" src="img/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150"/></a>
+				<a class="example-image-link" href="img/examples/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing."><img class="example-image" src="img/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150"/></a>
+				<a class="example-image-link last-example-image-link-in-set" href="img/examples/image-6.jpg" data-lightbox="example-set" title="Click the X or anywhere outside the image to close"><img class="example-image" src="img/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150"/></a>
 			</div>
 		</div>
 	</section>
diff --git a/js/lightbox.js b/js/lightbox.js
index eb2097a..8e16258 100644
--- a/js/lightbox.js
+++ b/js/lightbox.js
@@ -77,7 +77,7 @@ lightbox = new Lightbox options
 
     Lightbox.prototype.enable = function() {
       var _this = this;
-      return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox]', function(e) {
+      return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(e) {
         _this.start($(e.currentTarget));
         return false;
       });
@@ -127,7 +127,7 @@ lightbox = new Lightbox options
     };
 
     Lightbox.prototype.start = function($link) {
-      var $lightbox, $window, a, i, imageNumber, left, top, _i, _len, _ref;
+      var $lightbox, $window, a, dataLightboxValue, i, imageNumber, left, top, _i, _j, _len, _len1, _ref, _ref1;
       $(window).on("resize", this.sizeOverlay);
       $('select, object, embed').css({
         visibility: "hidden"
@@ -135,13 +135,9 @@ lightbox = new Lightbox options
       $('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
       this.album = [];
       imageNumber = 0;
-      if ($link.attr('rel') === 'lightbox') {
-        this.album.push({
-          link: $link.attr('href'),
-          title: $link.attr('title')
-        });
-      } else {
-        _ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
+      dataLightboxValue = $link.attr('data-lightbox');
+      if (dataLightboxValue) {
+        _ref = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]');
         for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
           a = _ref[i];
           this.album.push({
@@ -152,6 +148,25 @@ lightbox = new Lightbox options
             imageNumber = i;
           }
         }
+      } else {
+        if ($link.attr('rel') === 'lightbox') {
+          this.album.push({
+            link: $link.attr('href'),
+            title: $link.attr('title')
+          });
+        } else {
+          _ref1 = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
+          for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
+            a = _ref1[i];
+            this.album.push({
+              link: $(a).attr('href'),
+              title: $(a).attr('title')
+            });
+            if ($(a).attr('href') === $link.attr('href')) {
+              imageNumber = i;
+            }
+          }
+        }
       }
       $window = $(window);
       top = $window.scrollTop() + $window.height() / 10;
diff --git a/sass/screen.sass b/sass/screen.sass
index a28a930..fd14be7 100644
--- a/sass/screen.sass
+++ b/sass/screen.sass
@@ -138,6 +138,9 @@ body
 .author-links
   font-size: $fontSize - 4
 
+.lead
+  font-size: $fontSize + 4
+
 /* -- Examples -- */
 
 .image-row