emanchado
/
lightbox2
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

Support for HTML5 valid data-lightbox attribute as an alternative to rel="lightbox"

master
Lokesh Dhakar před 7 roky
rodič
d0f5e958ab
revize
c31a0eba6a
5 změnil soubory, kde provedl 80 přidání a 50 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Download Patch File Stáhněte rozdílový soubor
  1. +17
    -9
      coffee/lightbox.coffee
  2. +29
    -24
      css/screen.css
  3. +7
    -8
      index.html
  4. +24
    -9
      js/lightbox.js
  5. +3
    -0
      sass/screen.sass

+ 17
- 9
coffee/lightbox.coffee Zobrazit soubor

@@ -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)


+ 29
- 24
css/screen.css Zobrazit soubor

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


+ 7
- 8
index.html Zobrazit soubor

@@ -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>


+ 24
- 9
js/lightbox.js Zobrazit soubor

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


+ 3
- 0
sass/screen.sass Zobrazit soubor

@@ -138,6 +138,9 @@ body
.author-links
font-size: $fontSize - 4

.lead
font-size: $fontSize + 4

/* -- Examples -- */

.image-row


Zapsat Náhled
Načítá se…
Zrušit
Uložit