From c31a0eba6a5bd9c82c132dac8609a201974b1710 Mon Sep 17 00:00:00 2001 From: Lokesh Dhakar Date: Sun, 30 Jun 2013 21:58:39 -0700 Subject: [PATCH] Support for HTML5 valid data-lightbox attribute as an alternative to rel="lightbox" --- coffee/lightbox.coffee | 26 ++++++++++++++------- css/screen.css | 53 +++++++++++++++++++++++------------------- index.html | 15 ++++++------ js/lightbox.js | 33 +++++++++++++++++++------- sass/screen.sass | 3 +++ 5 files changed, 80 insertions(+), 50 deletions(-) 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 @@ Follow me on Twitter

- -

+

Lightbox is a script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers.

@@ -43,18 +42,18 @@

Single image

- thumb-1 - thumb-1 + thumb-1 + thumb-1

Image set

- Plants: image 1 0f 4 thumb - Plants: image 2 0f 4 thumb - Plants: image 3 0f 4 thumb - Plants: image 4 0f 4 thumb + Plants: image 1 0f 4 thumb + Plants: image 2 0f 4 thumb + Plants: image 3 0f 4 thumb + Plants: image 4 0f 4 thumb
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