@@ -54,20 +54,25 @@ class LightboxOptions | |||
class Lightbox | |||
constructor: (@options) -> | |||
@album = [] | |||
@currentImageNumber = undefined | |||
@currentImageIndex = undefined | |||
@init() | |||
init: -> | |||
@enable() | |||
@build() | |||
# Loop through anchors and areamaps looking for rel attributes that contain 'lightbox' | |||
# On clicking these, start lightbox. | |||
enable: -> | |||
$('a[rel^=lightbox], area[rel^=lightbox]').on 'click', (e) => | |||
@start e.currentTarget | |||
false | |||
# Insert html at the bottom of the page that is used for the overlay to darken the page | |||
# and also for showing the image and it's details. Attach event handlers to the new DOM elements as well. | |||
build: -> | |||
$("<div>", id: 'lightboxOverlay' ).after( | |||
$('<div/>', id: 'lightbox').append( | |||
@@ -101,26 +106,30 @@ class Lightbox | |||
) | |||
).appendTo $('body') | |||
$('#lightboxOverlay').on 'click', (e) => | |||
@end() | |||
return false | |||
$('#lightboxOverlay') | |||
.hide() | |||
.on 'click', (e) => | |||
@end() | |||
return false | |||
$lightbox = $('#lightbox') | |||
$lightbox.on 'click', (e) => | |||
if $(e.target).attr('id') == 'lightbox' then @end() | |||
return false | |||
$lightbox | |||
.hide() | |||
.on 'click', (e) => | |||
if $(e.target).attr('id') == 'lightbox' then @end() | |||
return false | |||
$lightbox.find('.outerContainer').on 'click', (e) => | |||
if $(e.target).attr('id') == 'lightbox' then @end() | |||
return false | |||
$lightbox.find('.prev').on 'click', (e) => | |||
@.changeImage @.currentImageNumber-1 | |||
@changeImage @currentImageIndex - 1 | |||
return false | |||
$lightbox.find('.next').on 'click', (e) => | |||
@.changeImage @.currentImageNumber+1 | |||
@changeImage @currentImageIndex + 1 | |||
return false | |||
$lightbox.find('.loader, .close').on 'click', (e) => | |||
@@ -129,20 +138,22 @@ class Lightbox | |||
return | |||
# Show overlay and lightbox. If the image is part of a set, add siblings to album array. | |||
start: (link) -> | |||
$('select, object, embed').css visibility: "hidden" | |||
$('#lightboxOverlay') | |||
.width( $(document).width() ) | |||
.height( $(document).height() ) | |||
.fadeIn( @options.fadeDuration ) | |||
@album = [] | |||
imageNumber = 0 | |||
if link.rel == 'lightbox' | |||
# If image is not part of a set | |||
@album.push link: link.href, title: link.title | |||
else | |||
# Image is part of a set | |||
for a, i in $( link.tagName+'[rel="' + link.rel + '"]') | |||
@album.push link: a.href, title: a.title | |||
if a.href == link.href | |||
@@ -154,28 +165,34 @@ class Lightbox | |||
left = $window.scrollLeft() | |||
$lightbox = $('#lightbox') | |||
$lightbox | |||
.fadeIn( @options.fadeDuration) | |||
.css | |||
opacity: 1 | |||
scale: 1 | |||
top: top + 'px' | |||
left: left + 'px' | |||
.fadeIn( @options.fadeDuration) | |||
@changeImage(imageNumber) | |||
return | |||
# Hide most UI elements in preparation for the animated resizing of the lightbox. | |||
changeImage: (imageNumber) -> | |||
@disableKeyboardNav() | |||
$lightbox = $('#lightbox') | |||
$image = $lightbox.find('.image') | |||
$('.loader').fadeIn 'slow' | |||
$lightbox.find('.image, .nav, .prev, .next, .dataContainer, .numbers').hide() | |||
$lightbox.find('.outerContainer').addClass 'animating' | |||
# When image to show is preloaded, we send the width and height to sizeContainer() | |||
preloader = new Image | |||
preloader.onload = () => | |||
$image.attr 'src', @album[@currentImageNumber].link | |||
$image.attr 'src', @album[@currentImageIndex].link | |||
# Bug fix by Andy Scott | |||
$image.width = preloader.width | |||
$image.height = preloader.height | |||
@@ -183,22 +200,28 @@ class Lightbox | |||
@sizeContainer preloader.width, preloader.height | |||
preloader.src = @album[imageNumber].link | |||
@currentImageNumber = imageNumber | |||
@currentImageIndex = imageNumber | |||
return | |||
# Animate the size of the lightbox to fit the image we are showing | |||
sizeContainer: (imageWidth, imageHeight) -> | |||
$lightbox = $('#lightbox') | |||
$outerContainer = $lightbox.find('.outerContainer') | |||
oldWidth = $outerContainer.outerWidth() | |||
oldHeight = $outerContainer.outerHeight() | |||
$container = $lightbox.find('.container') | |||
containerTopPadding = parseInt $container.css('padding-top'), 10 | |||
containerRightPadding = parseInt $container.css('padding-right'), 10 | |||
containerBottomPadding = parseInt $container.css('padding-bottom'), 10 | |||
containerLeftPadding = parseInt $container.css('padding-left'), 10 | |||
newWidth = imageWidth + containerLeftPadding + containerRightPadding | |||
newHeight = imageHeight + containerTopPadding + containerBottomPadding | |||
# TODO - replace 20 with dynamic code that pulls border/margins/padding | |||
newWidth = imageWidth + 20 | |||
newHeight = imageHeight + 20 | |||
# Animate just the width, just the height, or both, depending on what is different | |||
if newWidth != oldWidth && newHeight != oldHeight | |||
$outerContainer.animate | |||
width: newWidth, | |||
@@ -213,17 +236,19 @@ class Lightbox | |||
height: newHeight | |||
, @options.resizeDuration, 'easeInOutCubic' | |||
# Wait for resize animation to finsh before showing the image | |||
setTimeout => | |||
$lightbox.find('.dataContainer').width(newWidth) | |||
$lightbox.find('.prevLink').height(newHeight) | |||
$lightbox.find('.nextLink').height(newHeight) | |||
@showImage() | |||
return | |||
, @options.resizeDuration # Image starts fading in before resize is finished | |||
, @options.resizeDuration | |||
return | |||
# Display the image and it's details and begin preload neighboring images. | |||
showImage: -> | |||
$lightbox = $('#lightbox') | |||
$lightbox.find('.loader').hide() | |||
@@ -237,23 +262,25 @@ class Lightbox | |||
return | |||
# Display previous and next navigation if appropriate. | |||
updateNav: -> | |||
$lightbox = $('#lightbox') | |||
$lightbox.find('.nav').show() | |||
if @currentImageNumber > 0 then $lightbox.find('.prev').show(); | |||
if @currentImageNumber < @album.length - 1 then $lightbox.find('.next').show(); | |||
if @currentImageIndex > 0 then $lightbox.find('.prev').show(); | |||
if @currentImageIndex < @album.length - 1 then $lightbox.find('.next').show(); | |||
return | |||
# Display caption, image number, and closing button. | |||
updateDetails: -> | |||
$lightbox = $('#lightbox') | |||
$lightbox.find('.caption') | |||
.html( @album[@currentImageNumber].title) | |||
.html( @album[@currentImageIndex].title) | |||
.fadeIn('fast') | |||
if @album.length > 1 | |||
$lightbox.find('.number') | |||
.html( @options.labelImage + ' ' + (@currentImageNumber + 1) + ' ' + @options.labelOf + ' ' + @album.length) | |||
.html( @options.labelImage + ' ' + (@currentImageIndex + 1) + ' ' + @options.labelOf + ' ' + @album.length) | |||
.fadeIn('fast') | |||
else | |||
$lightbox.find('.number').hide() | |||
@@ -268,28 +295,28 @@ class Lightbox | |||
return | |||
# Preload previos and next images in set. | |||
preloadNeighboringImages: -> | |||
if @album.length > @currentImageNumber + 1 | |||
if @album.length > @currentImageIndex + 1 | |||
preloadNext = new Image | |||
preloadNext.src = @album[@currentImageNumber + 1].link | |||
preloadNext.src = @album[@currentImageIndex + 1].link | |||
if @currentImageNumber > 0 | |||
if @currentImageIndex > 0 | |||
preloadPrev = new Image | |||
preloadPrev.src = @album[@currentImageNumber - 1].link | |||
preloadPrev.src = @album[@currentImageIndex - 1].link | |||
return | |||
enableKeyboardNav: -> | |||
$(document).on 'keyup', $.proxy( @keyboardAction, this) | |||
$(document).on 'keyup.keyboard', $.proxy( @keyboardAction, this) | |||
return | |||
disableKeyboardNav: -> | |||
$(document).off 'keyup', @keyboardAction | |||
$(document).off '.keyboard' | |||
return | |||
keyboardAction: (event) -> | |||
KEYCODE_ESC = 27 | |||
KEYCODE_LEFTARROW = 37 | |||
@@ -297,30 +324,36 @@ class Lightbox | |||
keycode = event.keyCode | |||
key = String.fromCharCode(keycode).toLowerCase() | |||
if keycode == KEYCODE_ESC || key.match(/x|o|c/) | |||
@end() | |||
else if key == 'p' || keycode == KEYCODE_LEFTARROW | |||
if @currentImageNumber != 0 | |||
@disableKeyboardNav() | |||
@changeImage @currentImageNumber - 1 | |||
if @currentImageIndex != 0 | |||
@changeImage @currentImageIndex - 1 | |||
else if key == 'n' || keycode == KEYCODE_RIGHTARROW | |||
if @currentImageNumber != @album.length - 1 | |||
@disableKeyboardNav() | |||
@changeImage @currentImageNumber + 1 | |||
if @currentImageIndex != @album.length - 1 | |||
@changeImage @currentImageIndex + 1 | |||
return | |||
# Closing time. :-( | |||
end: -> | |||
@disableKeyboardNav() | |||
$('#lightbox').fadeOut 'fast' | |||
if Modernizr.csstransforms && Modernizr.csstransitions | |||
$('#lightbox').transition | |||
scale: '.9', opacity: 0 | |||
duration: 500 | |||
easing: 'in-out' | |||
-> | |||
$(this).hide() | |||
else | |||
$('#lightbox').fadeOut 'fast' | |||
$('#lightboxOverlay').fadeOut 'slow' | |||
$('select, object, embed').css visibility: "visible" | |||
$ -> | |||
options = new LightboxOptions | |||
lightbox = new Lightbox options |
@@ -85,14 +85,25 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, | |||
margin: 0 40px 40px 280px; | |||
} | |||
/* line 27, ../sass/screen.sass */ | |||
.row { | |||
*zoom: 1; | |||
} | |||
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */ | |||
.row:after { | |||
content: ""; | |||
display: table; | |||
clear: both; | |||
} | |||
/* Typography | |||
*----------------------------------------------- */ | |||
/* line 31, ../sass/screen.sass */ | |||
/* line 33, ../sass/screen.sass */ | |||
body { | |||
background: #222222 url(../images/bg-checker.png); | |||
} | |||
/* line 34, ../sass/screen.sass */ | |||
/* line 36, ../sass/screen.sass */ | |||
body, input, textarea { | |||
color: white; | |||
text-shadow: 0 -1px 0 black; | |||
@@ -103,12 +114,12 @@ body, input, textarea { | |||
-webkit-font-smoothing: antialiased; | |||
} | |||
/* line 43, ../sass/screen.sass */ | |||
/* line 45, ../sass/screen.sass */ | |||
#lightbox { | |||
text-shadow: none; | |||
} | |||
/* line 46, ../sass/screen.sass */ | |||
/* line 48, ../sass/screen.sass */ | |||
h1, h2, h3, h4, h5, h6 { | |||
font-family: "Fredoka One", "lucida grande", tahoma, sans-serif; | |||
font-weight: 400; | |||
@@ -118,20 +129,20 @@ h1, h2, h3, h4, h5, h6 { | |||
color: #d0eb6a; | |||
} | |||
/* line 54, ../sass/screen.sass */ | |||
/* line 56, ../sass/screen.sass */ | |||
h1 { | |||
font-size: 40px; | |||
line-height: 1.2em; | |||
} | |||
/* line 58, ../sass/screen.sass */ | |||
/* line 60, ../sass/screen.sass */ | |||
h2 { | |||
font-size: 34px; | |||
line-height: 1.45em; | |||
margin-bottom: 0.2em; | |||
} | |||
/* line 63, ../sass/screen.sass */ | |||
/* line 65, ../sass/screen.sass */ | |||
h3 { | |||
font-size: 16px; | |||
text-transform: uppercase; | |||
@@ -139,50 +150,50 @@ h3 { | |||
color: #88a616; | |||
} | |||
/* line 69, ../sass/screen.sass */ | |||
/* line 71, ../sass/screen.sass */ | |||
h4 { | |||
font-size: 16px; | |||
} | |||
/* Text elements */ | |||
/* line 75, ../sass/screen.sass */ | |||
/* line 77, ../sass/screen.sass */ | |||
p { | |||
margin: 0 0 1.25em 0; | |||
line-height: 1.625em; | |||
} | |||
/* line 79, ../sass/screen.sass */ | |||
/* line 81, ../sass/screen.sass */ | |||
ul, ol { | |||
margin: 0 0 1.25em 0; | |||
} | |||
/* line 82, ../sass/screen.sass */ | |||
/* line 84, ../sass/screen.sass */ | |||
dt { | |||
font-weight: bold; | |||
} | |||
/* line 85, ../sass/screen.sass */ | |||
/* line 87, ../sass/screen.sass */ | |||
dd { | |||
margin-bottom: 1.625em; | |||
} | |||
/* line 88, ../sass/screen.sass */ | |||
/* line 90, ../sass/screen.sass */ | |||
strong { | |||
font-weight: bold; | |||
} | |||
/* line 91, ../sass/screen.sass */ | |||
/* line 93, ../sass/screen.sass */ | |||
i { | |||
font-style: italic; | |||
} | |||
/* line 94, ../sass/screen.sass */ | |||
/* line 96, ../sass/screen.sass */ | |||
pre { | |||
background: rgba(0, 0, 0, 0.4); | |||
color: #e7931a; | |||
font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; | |||
line-height: 1.5; | |||
margin: 20px 0 40px 0; | |||
margin: 20px 0 20px 0; | |||
overflow: auto; | |||
padding: 1em; | |||
-webkit-border-radius: 4px; | |||
@@ -195,7 +206,7 @@ pre { | |||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px 2px black; | |||
} | |||
/* line 105, ../sass/screen.sass */ | |||
/* line 107, ../sass/screen.sass */ | |||
code, kbd { | |||
font: 14px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; | |||
background: rgba(0, 0, 0, 0.4); | |||
@@ -211,7 +222,7 @@ code, kbd { | |||
color: #e7931a; | |||
} | |||
/* line 113, ../sass/screen.sass */ | |||
/* line 115, ../sass/screen.sass */ | |||
pre code { | |||
font-size: 13px; | |||
background: transparent; | |||
@@ -222,19 +233,26 @@ pre code { | |||
} | |||
/* Links */ | |||
/* line 120, ../sass/screen.sass */ | |||
/* line 122, ../sass/screen.sass */ | |||
a { | |||
color: #8ad459; | |||
text-decoration: none; | |||
} | |||
/* line 123, ../sass/screen.sass */ | |||
/* line 125, ../sass/screen.sass */ | |||
a:hover { | |||
color: #589e29; | |||
} | |||
/* line 128, ../sass/screen.sass */ | |||
::-moz-selection, | |||
::selection { | |||
background: #e7931a; | |||
color: white; | |||
} | |||
/* sidebar | |||
*----------------------------------------------- */ | |||
/* line 131, ../sass/screen.sass */ | |||
/* line 137, ../sass/screen.sass */ | |||
#sidebar { | |||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); | |||
opacity: 0.6; | |||
@@ -244,16 +262,16 @@ a:hover { | |||
-o-transition: opacity 0.2s; | |||
transition: opacity 0.2s; | |||
} | |||
/* line 134, ../sass/screen.sass */ | |||
/* line 140, ../sass/screen.sass */ | |||
#sidebar:hover { | |||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); | |||
opacity: 1; | |||
} | |||
/* line 136, ../sass/screen.sass */ | |||
/* line 142, ../sass/screen.sass */ | |||
#sidebar a { | |||
color: white; | |||
} | |||
/* line 138, ../sass/screen.sass */ | |||
/* line 144, ../sass/screen.sass */ | |||
#sidebar .logo { | |||
-webkit-transition: all 0.2s ease-out; | |||
-moz-transition: all 0.2s ease-out; | |||
@@ -261,37 +279,37 @@ a:hover { | |||
-o-transition: all 0.2s ease-out; | |||
transition: all 0.2s ease-out; | |||
} | |||
/* line 140, ../sass/screen.sass */ | |||
/* line 146, ../sass/screen.sass */ | |||
#sidebar .logo em { | |||
color: #8ad459; | |||
} | |||
/* line 142, ../sass/screen.sass */ | |||
/* line 148, ../sass/screen.sass */ | |||
#sidebar .logo:hover { | |||
text-shadow: 0 0 20px #d0eb6a, 0 0 50px #d0eb6a; | |||
} | |||
/* line 144, ../sass/screen.sass */ | |||
/* line 150, ../sass/screen.sass */ | |||
#sidebar .author { | |||
font-weight: 800; | |||
line-height: 1.4em; | |||
} | |||
/* line 148, ../sass/screen.sass */ | |||
/* line 154, ../sass/screen.sass */ | |||
#sidebar .author a:hover { | |||
text-shadow: 0 0 10px white; | |||
} | |||
/* line 150, ../sass/screen.sass */ | |||
/* line 156, ../sass/screen.sass */ | |||
#sidebar .author .twitter { | |||
font-size: 14px; | |||
} | |||
/* line 152, ../sass/screen.sass */ | |||
/* line 158, ../sass/screen.sass */ | |||
#sidebar .author .twitter a { | |||
color: #4d9ed8; | |||
} | |||
/* line 154, ../sass/screen.sass */ | |||
/* line 160, ../sass/screen.sass */ | |||
#sidebar .author .twitter em { | |||
color: #4d9ed8; | |||
} | |||
/* line 157, ../sass/screen.sass */ | |||
/* line 163, ../sass/screen.sass */ | |||
#nav { | |||
list-style: none; | |||
margin: 1.5em 0 1em 0; | |||
@@ -300,12 +318,12 @@ a:hover { | |||
letter-spacing: 0.1em; | |||
font-family: "Fredoka One", "lucida grande", tahoma, sans-serif; | |||
} | |||
/* line 164, ../sass/screen.sass */ | |||
/* line 170, ../sass/screen.sass */ | |||
#nav li { | |||
padding: 0; | |||
margin: 0; | |||
} | |||
/* line 167, ../sass/screen.sass */ | |||
/* line 173, ../sass/screen.sass */ | |||
#nav a { | |||
display: block; | |||
height: 2em; | |||
@@ -319,12 +337,12 @@ a:hover { | |||
-o-transition: all 0.2s ease-out; | |||
transition: all 0.2s ease-out; | |||
} | |||
/* line 175, ../sass/screen.sass */ | |||
/* line 181, ../sass/screen.sass */ | |||
#nav a:hover { | |||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8); | |||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); | |||
background-color: #88a616; | |||
} | |||
/* line 178, ../sass/screen.sass */ | |||
/* line 184, ../sass/screen.sass */ | |||
#nav a.first { | |||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6e6e6e), color-stop(100%, #505050)); | |||
background: -webkit-linear-gradient(#6e6e6e, #505050); | |||
@@ -345,7 +363,7 @@ a:hover { | |||
border-top-right-radius: 4px; | |||
border-top-color: transparent; | |||
} | |||
/* line 183, ../sass/screen.sass */ | |||
/* line 189, ../sass/screen.sass */ | |||
#nav a.first:hover { | |||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #add31c), color-stop(100%, #88a616)); | |||
background: -webkit-linear-gradient(#add31c, #88a616); | |||
@@ -354,7 +372,7 @@ a:hover { | |||
background: -ms-linear-gradient(#add31c, #88a616); | |||
background: linear-gradient(#add31c, #88a616); | |||
} | |||
/* line 185, ../sass/screen.sass */ | |||
/* line 191, ../sass/screen.sass */ | |||
#nav a.last { | |||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #505050), color-stop(100%, #323232)); | |||
background: -webkit-linear-gradient(#505050, #323232); | |||
@@ -374,7 +392,7 @@ a:hover { | |||
-o-border-bottom-right-radius: 4px; | |||
border-bottom-right-radius: 4px; | |||
} | |||
/* line 189, ../sass/screen.sass */ | |||
/* line 195, ../sass/screen.sass */ | |||
#nav a.last:hover { | |||
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #88a616), color-stop(100%, #637910)); | |||
background: -webkit-linear-gradient(#88a616, #637910); | |||
@@ -386,62 +404,139 @@ a:hover { | |||
/* content | |||
*----------------------------------------------- */ | |||
/* line 196, ../sass/screen.sass */ | |||
#content ul { | |||
margin-left: 4px; | |||
} | |||
/* line 198, ../sass/screen.sass */ | |||
#content ul li { | |||
list-style: none; | |||
padding: 0 0 0 12px; | |||
background: url(../images/bullet.gif) no-repeat 0 6px; | |||
} | |||
/* line 202, ../sass/screen.sass */ | |||
#content ul ul { | |||
margin-top: 0; | |||
} | |||
/* line 205, ../sass/screen.sass */ | |||
.download { | |||
float: left; | |||
margin: 0 40px 40px 0; | |||
padding: 10px 20px 10px 10px; | |||
background-color: #333333; | |||
border: 1px solid #444444; | |||
border: 5px solid #333333; | |||
-webkit-border-radius: 4px; | |||
-moz-border-radius: 4px; | |||
-ms-border-radius: 4px; | |||
-o-border-radius: 4px; | |||
border-radius: 4px; | |||
padding: 0.7em 1.5em; | |||
-webkit-transition: all 0.2s ease-out; | |||
-moz-transition: all 0.2s ease-out; | |||
-ms-transition: all 0.2s ease-out; | |||
-o-transition: all 0.2s ease-out; | |||
transition: all 0.2s ease-out; | |||
} | |||
/* line 210, ../sass/screen.sass */ | |||
.download:hover { | |||
background-color: #555555; | |||
border: 1px solid #777777; | |||
border-color: #8ad459; | |||
background-color: #444444; | |||
} | |||
/* line 213, ../sass/screen.sass */ | |||
.download .box { | |||
float: left; | |||
} | |||
/* line 215, ../sass/screen.sass */ | |||
.download .file { | |||
float: left; | |||
font-size: 36px; | |||
font-family: "Fredoka One", "lucida grande", tahoma, sans-serif; | |||
font-weight: 400; | |||
color: white; | |||
line-height: 1.1em; | |||
} | |||
/* line 222, ../sass/screen.sass */ | |||
.download .file .version { | |||
font-size: 24px; | |||
color: #8ad459; | |||
} | |||
/* line 214, ../sass/screen.sass */ | |||
#content ul.download li { | |||
padding: 0.3em 0; | |||
background-image: none; | |||
/* line 227, ../sass/screen.sass */ | |||
.filelist { | |||
float: left; | |||
font-size: 12px; | |||
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; | |||
line-height: 1.5em; | |||
} | |||
/* line 232, ../sass/screen.sass */ | |||
.filelist .header { | |||
text-transform: uppercase; | |||
font-weight: bold; | |||
} | |||
/* line 235, ../sass/screen.sass */ | |||
.filelist .folder { | |||
color: #999999; | |||
} | |||
/* line 219, ../sass/screen.sass */ | |||
.download img { | |||
padding-right: 0.3em; | |||
/* line 239, ../sass/screen.sass */ | |||
.changelog { | |||
margin-bottom: 0.5em; | |||
} | |||
/* line 222, ../sass/screen.sass */ | |||
.download li strong { | |||
font-size: 2.25em; | |||
/* line 241, ../sass/screen.sass */ | |||
.changelog li { | |||
list-style: none; | |||
padding: 0 0 0 14px; | |||
background: url(../images/bullet.gif) no-repeat 0 11px; | |||
color: #999999; | |||
} | |||
/* line 246, ../sass/screen.sass */ | |||
.changelog li .version { | |||
color: #88a616; | |||
} | |||
/* line 248, ../sass/screen.sass */ | |||
.changelog li .date { | |||
color: white; | |||
} | |||
/* line 225, ../sass/screen.sass */ | |||
.download li em { | |||
font-style: normal; | |||
color: #d0eb6a; | |||
/* line 250, ../sass/screen.sass */ | |||
.changelog .old { | |||
display: none; | |||
} | |||
/* line 253, ../sass/screen.sass */ | |||
.showOlderChanges { | |||
color: #999999; | |||
} | |||
/* line 257, ../sass/screen.sass */ | |||
.forums { | |||
float: left; | |||
margin: 0 40px 40px 0; | |||
padding: 10px; | |||
background-color: #333333; | |||
border: 5px solid #333333; | |||
-webkit-border-radius: 4px; | |||
-moz-border-radius: 4px; | |||
-ms-border-radius: 4px; | |||
-o-border-radius: 4px; | |||
border-radius: 4px; | |||
-webkit-transition: all 0.2s ease-out; | |||
-moz-transition: all 0.2s ease-out; | |||
-ms-transition: all 0.2s ease-out; | |||
-o-transition: all 0.2s ease-out; | |||
transition: all 0.2s ease-out; | |||
} | |||
/* line 265, ../sass/screen.sass */ | |||
.forums:hover { | |||
border-color: #8ad459; | |||
background-color: #444444; | |||
} | |||
/* line 268, ../sass/screen.sass */ | |||
.forums .speech { | |||
float: left; | |||
margin-right: 20px; | |||
} | |||
/* line 271, ../sass/screen.sass */ | |||
.forums .link { | |||
float: left; | |||
font-size: 36px; | |||
font-family: "Fredoka One", "lucida grande", tahoma, sans-serif; | |||
font-weight: 400; | |||
color: white; | |||
line-height: 1.1em; | |||
} | |||
/* line 278, ../sass/screen.sass */ | |||
.forums .link .sub { | |||
color: #8ad459; | |||
} | |||
/* misc | |||
*----------------------------------------------- */ | |||
/* line 232, ../sass/screen.sass */ | |||
/* line 284, ../sass/screen.sass */ | |||
p.lead { | |||
font-size: 26px; | |||
font-weight: 600; | |||
@@ -449,7 +544,7 @@ p.lead { | |||
margin-bottom: 0; | |||
} | |||
/* line 239, ../sass/screen.sass */ | |||
/* line 291, ../sass/screen.sass */ | |||
hr { | |||
height: 6px; | |||
background: #3d3d33; | |||
@@ -459,18 +554,19 @@ hr { | |||
-ms-border-radius: 4px; | |||
-o-border-radius: 4px; | |||
border-radius: 4px; | |||
clear: both; | |||
} | |||
/* line 245, ../sass/screen.sass */ | |||
/* line 298, ../sass/screen.sass */ | |||
section { | |||
padding: 40px 0; | |||
} | |||
/* line 247, ../sass/screen.sass */ | |||
/* line 300, ../sass/screen.sass */ | |||
section:first-child { | |||
border-top: none; | |||
} | |||
/* line 250, ../sass/screen.sass */ | |||
/* line 303, ../sass/screen.sass */ | |||
.imageRow { | |||
*zoom: 1; | |||
margin: 20px 0; | |||
@@ -481,11 +577,11 @@ section:first-child { | |||
display: table; | |||
clear: both; | |||
} | |||
/* line 253, ../sass/screen.sass */ | |||
/* line 306, ../sass/screen.sass */ | |||
.imageRow .single { | |||
float: left; | |||
} | |||
/* line 255, ../sass/screen.sass */ | |||
/* line 308, ../sass/screen.sass */ | |||
.imageRow .single a { | |||
float: left; | |||
display: block; | |||
@@ -497,9 +593,9 @@ section:first-child { | |||
-ms-border-radius: 4px; | |||
-o-border-radius: 4px; | |||
border-radius: 4px; | |||
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
margin-right: 40px; | |||
-webkit-transition: all 0.2s ease-out; | |||
-moz-transition: all 0.2s ease-out; | |||
@@ -507,7 +603,7 @@ section:first-child { | |||
-o-transition: all 0.2s ease-out; | |||
transition: all 0.2s ease-out; | |||
} | |||
/* line 265, ../sass/screen.sass */ | |||
/* line 318, ../sass/screen.sass */ | |||
.imageRow .single a img { | |||
-webkit-border-radius: 4px; | |||
-moz-border-radius: 4px; | |||
@@ -516,11 +612,11 @@ section:first-child { | |||
border-radius: 4px; | |||
border: 1px solid rgba(0, 0, 0, 0.3); | |||
} | |||
/* line 268, ../sass/screen.sass */ | |||
/* line 321, ../sass/screen.sass */ | |||
.imageRow .single a:hover { | |||
background-color: #88a616; | |||
background-color: #8ad459; | |||
} | |||
/* line 270, ../sass/screen.sass */ | |||
/* line 323, ../sass/screen.sass */ | |||
.imageRow .set { | |||
float: left; | |||
background: rgba(255, 255, 255, 0.1); | |||
@@ -529,20 +625,20 @@ section:first-child { | |||
-ms-border-radius: 4px; | |||
-o-border-radius: 4px; | |||
border-radius: 4px; | |||
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-webkit-transition: all 0.2s ease-out; | |||
-moz-transition: all 0.2s ease-out; | |||
-ms-transition: all 0.2s ease-out; | |||
-o-transition: all 0.2s ease-out; | |||
transition: all 0.2s ease-out; | |||
} | |||
/* line 276, ../sass/screen.sass */ | |||
/* line 329, ../sass/screen.sass */ | |||
.imageRow .set:hover { | |||
background: rgba(255, 255, 255, 0.2); | |||
} | |||
/* line 279, ../sass/screen.sass */ | |||
/* line 332, ../sass/screen.sass */ | |||
.imageRow .set .single a { | |||
background: none; | |||
-webkit-border-radius: 0; | |||
@@ -555,14 +651,14 @@ section:first-child { | |||
box-shadow: none; | |||
margin-right: 0; | |||
} | |||
/* line 284, ../sass/screen.sass */ | |||
/* line 337, ../sass/screen.sass */ | |||
.imageRow .set .single a:hover { | |||
background-color: #88a616; | |||
background-color: #8ad459; | |||
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5); | |||
} | |||
/* line 288, ../sass/screen.sass */ | |||
/* line 341, ../sass/screen.sass */ | |||
.imageRow .set .single.first a { | |||
-moz-border-radius-topleft: 4px; | |||
-webkit-border-top-left-radius: 4px; | |||
@@ -575,7 +671,7 @@ section:first-child { | |||
-o-border-bottom-left-radius: 4px; | |||
border-bottom-left-radius: 4px; | |||
} | |||
/* line 291, ../sass/screen.sass */ | |||
/* line 344, ../sass/screen.sass */ | |||
.imageRow .set .single.last a { | |||
-moz-border-radius-topright: 4px; | |||
-webkit-border-top-right-radius: 4px; | |||
@@ -15,13 +15,12 @@ | |||
<meta name="MobileOptimized" content="320"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<link rel="shortcut icon" type="image/ico" href="/images/favicon.gif" /> | |||
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" /> | |||
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" /> | |||
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> | |||
<script src="js/modernizr-2.0.js"></script> | |||
<script src="js/modernizr-2.5.3.min.js"></script> | |||
<!--Fonts from Google"s Web font directory at http://google.com/webfonts --> | |||
<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'> | |||
</head> | |||
@@ -34,10 +33,9 @@ | |||
<ul id="nav"> | |||
<li><a href="#example" class="first">Example</a></li> | |||
<li><a href="#how">How to Use</a></li> | |||
<li><a href="#download">Download</a></li> | |||
<li><a href="#how">How to Use</a></li> | |||
<li><a href="#support">Support</a></li> | |||
<li><a href="#contact">Contact</a></li> | |||
<li><a href="#donate" class="last">Donate</a></li> | |||
</ul> | |||
</div> | |||
@@ -88,29 +86,87 @@ | |||
<hr /> | |||
<section id="download"> | |||
<h2>Download</h2> | |||
<div class="row"> | |||
<a href="releases/lightbox2.5.zip" class="download"> | |||
<img src="images/box.png" alt="Box" class="box" /> | |||
<div class="file"> | |||
Lightbox <div class="version">v2.5</div> | |||
</div> | |||
</a> | |||
<ul class="filelist"> | |||
<li class="header">Includes:</li> | |||
<li>index.html</li> | |||
<li><span class="folder">js/</span>lightbox.js</li> | |||
<li><span class="folder">js/</span>jquery-1.7.2.min.js</li> | |||
<li><span class="folder">js/</span>jquery-ui-1.8.18.custom.min.js</li> | |||
<li><span class="folder">js/</span>jquery.transit.min.js</li> | |||
<li><span class="folder">css/</span>lightbox.css</li> | |||
<li><span class="folder">images/</span>close.png</li> | |||
<li><span class="folder">images/</span>loading.gif</li> | |||
<li><span class="folder">images/</span>next.png</li> | |||
<li><span class="folder">images/</span>prev.png</li> | |||
</ul> | |||
</div> | |||
<p>Lightbox2 is open-source.<br /> Fork the code on <a href="https://github.com/lokesh/lightbox2">Github</a>.</p> | |||
<h3>Changelog</h3> | |||
<ul class="changelog"> | |||
<li><span class="version">v2.5 </span> - <span class="date">4/10/12</span> - Switch to jQuery. Code put in Github. Compiling with Coffeescript and SASS.</li> | |||
<li class="old"><span class="version">v2.05 </span> - <span class="date">3/18/11</span> - Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes.</li> | |||
<li class="old"><span class="version">v2.04 </span> - <span class="date">3/9/08</span> | |||
<ul> | |||
<li>NEW - Upgraded Prototype from v1.4 to v1.6.0.2 | |||
<li>NEW - Moved label text into configuration for easier localization</li> | |||
<li>UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.</li> | |||
<li>FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.</li> | |||
<li>FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.</li> | |||
</ul> | |||
</li> | |||
<li class="old"><span class="version">v2.03.3 </span> - <span class="date">5/21/07 </span>- Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.</li> | |||
<li class="old"><span class="version">v2.03.2 </span> - <span class="date">4/30/07</span> - Fixed animated gif support in IE/Opera.</li> | |||
<li class="old"><span class="version">v2.03.1 </span> - <span class="date">4/18/07</span> - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.</li> | |||
<li class="old"><span class="version">v2.03</span> - <span class="date">4/10/07 </span>- Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.</li> | |||
<li class="old"><span class="version">v2.02</span> - Fixed layout issues caused by multiline captions. Added keyboard navigation.</li> | |||
<li class="old"><span class="version">v2.01</span> - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.</li> | |||
</ul> | |||
<a href="#" class="showOlderChanges">Show older changes</a> | |||
</section> | |||
<hr /> | |||
<section id="how"> | |||
<h2>How to use</h2> | |||
<h3>Part 1 - Setup</h3> | |||
<ol> | |||
<li>Lightbox 2 uses jQuery and a bit of jQuery UI. You will need to include these three Javascript files in your header (in this order). | |||
<pre><code><script type="text/javascript" src="js/prototype.js"></script> | |||
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> | |||
<script type="text/javascript" src="js/lightbox.js"></script> | |||
<li>Lightbox 2 uses jQuery, jQuery UI, and a plugin called jQuery Transit. Load these three files plus the Lightbox javascript in the proper order. | |||
<pre><code><script src="js/jquery-1.7.2.min.js"></script> | |||
<script src="js/jquery-ui-1.8.18.custom.min.js"></script> | |||
<script src="js/jquery.transit.min.js"></script> | |||
<script src="js/lightbox.js"></script> | |||
</code></pre> | |||
</li> | |||
<li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). | |||
<pre><code><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> | |||
<li>Include the Lightbox CSS file. | |||
<pre><code><link href="css/lightbox.css" rel="stylesheet" /> | |||
</code></pre> | |||
</li> | |||
<li>Check the CSS and make sure the referenced <code>prev.gif</code> and <code>next.gif</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.gif</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li> | |||
<li>Check the CSS and make sure the referenced <code>prev.png</code> and <code>next.png</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.png</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li> | |||
</ol> | |||
<h3>Part 2 - Activate</h3> | |||
<ol> | |||
<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate the lightbox. For example: | |||
<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate Lightbox. | |||
<pre><code><a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> | |||
</code></pre> | |||
<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption. </li> | |||
<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: | |||
<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. | |||
<pre><code><a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> | |||
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> | |||
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a> | |||
@@ -120,79 +176,25 @@ | |||
</section> | |||
<hr /> | |||
<section id="download"> | |||
<h2>Download</h2> | |||
<ul class="download"> | |||
<li><a href="releases/lightbox2.05.zip"><img src="images/download-icon.gif" width="22" height="22" alt="download Lightbox" /> <strong>Lightbox <em><small>v2.05</small></em></strong></a></li> | |||
</ul> | |||
<h3>Changelog</h3> | |||
<ul> | |||
<li><strong>v2.05 </strong> - 3/18/11 - Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes.</li> | |||
<li><strong>v2.04 </strong> - 3/9/08 | |||
<ul> | |||
<li>NEW - Upgraded Prototype from v1.4 to v1.6.0.2 | |||
<li>NEW - Moved label text into configuration for easier localization</li> | |||
<li>UPDATED - Code cleaned up. Respect for the global namespace and native javascript objects.</li> | |||
<li>FIXED - Caption displays as "null" when viewing an uncaptioned image after viewing a captioned image.</li> | |||
<li>FIXED - Clicking 'close' button shifts layout as link focus' dotted line appears.</li> | |||
</ul> | |||
</li> | |||
<li><strong>v2.03.3 </strong> - 5/21/07 - Support for horizontally scrolling pages. Added updateImageList method for ajax'y pages.</li> | |||
<li><strong>v2.03.2 </strong> - 4/30/07 - Fixed animated gif support in IE/Opera.</li> | |||
<li><strong>v2.03.1 </strong> - 4/18/07 - Fixed embed hiding. Overlay opacity var added to config. Image sets w/Imagemaps fix. Clearfix removed.</li> | |||
<li><strong>v2.03</strong> - 4/10/07 - Improved keyboard navigation. Animation off toggle. Hides Flash movies under overlay. Imagemap support. Valid CSS.</li> | |||
<li><strong>v2.02</strong> - Fixed layout issues caused by multiline captions. Added keyboard navigation.</li> | |||
<li><strong>v2.01</strong> - Centering in IE6 (any DOCTYPE) fixed. Smoothed out resize transition.</li> | |||
</ul> | |||
</section> | |||
<hr /> | |||
<section id="support"> | |||
<h2>Support</h2> | |||
<dl> | |||
<dt>It doesn't work at all. The image opens up in a new page. What's wrong?</dt> | |||
<dd>This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:<br /> | |||
<code><body onload="MM_preloadImages(‘/images/menu_on.gif’)…;"></code><br /> | |||
A quick fix to this problem is to append the <code>initLightbox()</code> to the onload attribute as so:<br /> | |||
<code><body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()"></code><br /></dd> | |||
<dt>It doesn't work if I click an image link before the page has finished loading.</dt> | |||
<dd>The script is activated only after the page has finished loading.</dd> | |||
<dt>The shadow overlay doesn't stretch to cover full browser window.</dt> | |||
<dd>Remove the default margin and padding from the body tag. Add <code>body{ margin: 0; padding: 0; }</code> to your stylesheet.</dd> | |||
<dt>Can I insert links in the caption?</dt> | |||
<dd>Yes, but you need to <a href="http://centricle.com/tools/html-entities/">convert</a> quotes and greater and less than symbols into their html entity equivalents. For example:<br /> | |||
<code><a href="images/image-4.jpg" rel="lightbox" title="&lt;a href=&quot;link.html&quot;&gt;my link&lt;/a&gt;">Image</a></code></dd> | |||
<dt>Can I display flash, video, or other content using the script?</dt> | |||
<dd>Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's <a href="http://jquery.com/demo/thickbox/">ThickBox</a>.</dd> | |||
<dt>Can the script be called from an iframe?</dt> | |||
<dd>If you're using iframes, try the <a href="http://www.dolem.com/lytebox/">Lytebox</a> modification which has better support.</dd> | |||
<dt>Can I use the script in a commercial project?</dt> | |||
<dd>Yes. It is licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. A <a href="#donate">donation</a> would be nice, hint hint.<br /><br /> | |||
As for proper attribution, all that is required is that you leave my name and link atop the lightbox javascript file. I do appreciate an html link, but it is not required. | |||
</dd> | |||
</dl> | |||
</section> | |||
<hr /> | |||
<h2>Support</h2> | |||
<p>For troubleshooting, feature requests, and general Lightbox related discussion, post a message in the forums. | |||
If it is a support question, include details on your browser, Lightbox version, and a link if possible. | |||
I do not have time to personally respond to support emails, please use the forum. Thanks! | |||
</p> | |||
<p>To send me a non-support related note, my address is lokesh.dhakar@[ google's email service ].com.</p> | |||
<a href="http://lokeshdhakar.com/forums/" class="forums"> | |||
<img src="images/speech-bubbles.png" alt="Speech bubbles" class="speech" /> | |||
<div class="link"> | |||
Lightbox<br /> | |||
<span class="sub">Forums</span> | |||
</div> | |||
</a> | |||
<section id="contact"> | |||
<h2>Contact</h2> | |||
<p>For troubleshooting, feature requests, and general help, post a message in the <a href="http://lokeshdhakar.com/forums/">Lightbox Forum</a>. Make sure to | |||
include details on your browser, operating system, Lightbox version, and a link (or relevant code). | |||
I do not have time to personally respond to support emails, please use the forum. | |||
</p> | |||
<p>To send me a non-support related note, use lokesh.dhakar@[ google's email service ].com. Thanks.</p> | |||
<h3> <a href="http://lokeshdhakar.com/forums/">Lightbox Forum</a></h3> | |||
</section> | |||
@@ -201,7 +203,7 @@ | |||
<section id="donate"> | |||
<h2>Donate</h2> | |||
<p>If you're feeling generous, consider a donation. Any and all PayPal donations are sincerely appreciated. Thanks.</p> | |||
<p>Lightbox is completely free to use. If you're using Lightbox on a commercial project and feeling generous, consider a donation. All donations are sincerely appreciated. Thanks!</p> | |||
<form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post"> | |||
<fieldset> | |||
@@ -212,24 +214,31 @@ | |||
<input type="hidden" name="currency_code" value="USD" /> | |||
<input type="hidden" name="tax" value="0" /> | |||
<input type="hidden" name="bn" value="PP-DonationsBF" /> | |||
<input type="image" src="images/donate-button.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" /> | |||
<input type="image" src="images/donate.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" /> | |||
</fieldset> | |||
</form> | |||
</section> | |||
</div><!-- end #content --> | |||
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> | |||
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript" charset="utf-8"></script> | |||
<script src="js/jquery.smooth-scroll.min.js" type="text/javascript" charset="utf-8"></script> | |||
<script src="js/lightbox-jquery.js" type="text/javascript"></script> | |||
<script src="js/jquery-1.7.2.min.js"></script> | |||
<script src="js/jquery-ui-1.8.18.custom.min.js"></script> | |||
<script src="js/jquery.transit.min.js"></script> | |||
<script src="js/jquery.smooth-scroll.min.js"></script> | |||
<script src="js/lightbox.js"></script> | |||
<script type="text/javascript"> | |||
<script> | |||
jQuery(document).ready(function($) { | |||
$('a').smoothScroll({ | |||
speed: 1000, | |||
easing: 'easeInOutCubic' | |||
}); | |||
$('.showOlderChanges').on('click', function(e){ | |||
$('.changelog .old').slideDown('slow'); | |||
$(this).fadeOut(); | |||
e.preventDefault(); | |||
}) | |||
}); | |||
var _gaq = _gaq || []; | |||
@@ -242,4 +251,5 @@ | |||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | |||
})(); | |||
</script></html> | |||
</script> | |||
</html> |
@@ -0,0 +1,19 @@ | |||
/*! | |||
* jQuery Transit - CSS3 transitions and transformations | |||
* Copyright(c) 2011 Rico Sta. Cruz <rico@ricostacruz.com> | |||
* MIT Licensed. | |||
* | |||
* http://ricostacruz.com/jquery.transit | |||
* http://github.com/rstacruz/jquery.transit | |||
*/ | |||
(function(d){function k(a){var b=["Moz","Webkit","O","ms"],c=a.charAt(0).toUpperCase()+a.substr(1);if(a in i.style)return a;for(a=0;a<b.length;++a){var d=b[a]+c;if(d in i.style)return d}}function j(a){"string"===typeof a&&this.parse(a);return this}function p(a,b,c){!0===b?a.queue(c):b?a.queue(b,c):c()}function m(a){var b=[];d.each(a,function(a){a=d.camelCase(a);a=d.transit.propertyMap[a]||a;a=r(a);-1===d.inArray(a,b)&&b.push(a)});return b}function q(a,b,c,e){a=m(a);d.cssEase[c]&&(c=d.cssEase[c]); | |||
var h=""+n(b)+" "+c;0<parseInt(e,10)&&(h+=" "+n(e));var f=[];d.each(a,function(a,b){f.push(b+" "+h)});return f.join(", ")}function f(a,b){b||(d.cssNumber[a]=!0);d.transit.propertyMap[a]=e.transform;d.cssHooks[a]={get:function(b){return(d(b).css("transform")||new j).get(a)},set:function(b,e){var h=d(b).css("transform")||new j;h.setFromString(a,e);d(b).css({transform:h})}}}function r(a){return a.replace(/([A-Z])/g,function(a){return"-"+a.toLowerCase()})}function g(a,b){return"string"===typeof a&&!a.match(/^[\-0-9\.]+$/)? | |||
a:""+a+b}function n(a){d.fx.speeds[a]&&(a=d.fx.speeds[a]);return g(a,"ms")}d.transit={version:"0.1.3",propertyMap:{marginLeft:"margin",marginRight:"margin",marginBottom:"margin",marginTop:"margin",paddingLeft:"padding",paddingRight:"padding",paddingBottom:"padding",paddingTop:"padding"},enabled:!0,useTransitionEnd:!1};var i=document.createElement("div"),e={},s=-1<navigator.userAgent.toLowerCase().indexOf("chrome");e.transition=k("transition");e.transitionDelay=k("transitionDelay");e.transform=k("transform"); | |||
e.transformOrigin=k("transformOrigin");i.style[e.transform]="";i.style[e.transform]="rotateY(90deg)";e.transform3d=""!==i.style[e.transform];d.extend(d.support,e);var o=e.transitionEnd={MozTransition:"transitionend",OTransition:"oTransitionEnd",WebkitTransition:"webkitTransitionEnd",msTransition:"MSTransitionEnd"}[e.transition]||null,i=null;d.cssEase={_default:"ease","in":"ease-in",out:"ease-out","in-out":"ease-in-out",snap:"cubic-bezier(0,1,.5,1)"};d.cssHooks.transform={get:function(a){return d(a).data("transform")}, | |||
set:function(a,b){var c=b;c instanceof j||(c=new j(c));a.style[e.transform]="WebkitTransform"===e.transform&&!s?c.toString(!0):c.toString();d(a).data("transform",c)}};d.cssHooks.transformOrigin={get:function(a){return a.style[e.transformOrigin]},set:function(a,b){a.style[e.transformOrigin]=b}};f("scale");f("translate");f("rotate");f("rotateX");f("rotateY");f("rotate3d");f("perspective");f("skewX");f("skewY");f("x",!0);f("y",!0);j.prototype={setFromString:function(a,b){var c="string"===typeof b?b.split(","): | |||
b.constructor===Array?b:[b];c.unshift(a);j.prototype.set.apply(this,c)},set:function(a){var b=Array.prototype.slice.apply(arguments,[1]);this.setter[a]?this.setter[a].apply(this,b):this[a]=b.join(",")},get:function(a){return this.getter[a]?this.getter[a].apply(this):this[a]||0},setter:{rotate:function(a){this.rotate=g(a,"deg")},rotateX:function(a){this.rotateX=g(a,"deg")},rotateY:function(a){this.rotateY=g(a,"deg")},scale:function(a,b){void 0===b&&(b=a);this.scale=a+","+b},skewX:function(a){this.skewX= | |||
g(a,"deg")},skewY:function(a){this.skewY=g(a,"deg")},perspective:function(a){this.perspective=g(a,"px")},x:function(a){this.set("translate",a,null)},y:function(a){this.set("translate",null,a)},translate:function(a,b){void 0===this._translateX&&(this._translateX=0);void 0===this._translateY&&(this._translateY=0);null!==a&&(this._translateX=g(a,"px"));null!==b&&(this._translateY=g(b,"px"));this.translate=this._translateX+","+this._translateY}},getter:{x:function(){return this._translateX||0},y:function(){return this._translateY|| | |||
0},scale:function(){var a=(this.scale||"1,1").split(",");a[0]&&(a[0]=parseFloat(a[0]));a[1]&&(a[1]=parseFloat(a[1]));return a[0]===a[1]?a[0]:a},rotate3d:function(){for(var a=(this.rotate3d||"0,0,0,0deg").split(","),b=0;3>=b;++b)a[b]&&(a[b]=parseFloat(a[b]));a[3]&&(a[3]=g(a[3],"deg"));return a}},parse:function(a){var b=this;a.replace(/([a-zA-Z0-9]+)\((.*?)\)/g,function(a,d,e){b.setFromString(d,e)})},toString:function(a){var b=[],c;for(c in this)if(this.hasOwnProperty(c)&&(e.transform3d||!("rotateX"=== | |||
c||"rotateY"===c||"perspective"===c||"transformOrigin"===c)))"_"!==c[0]&&(a&&"scale"===c?b.push(c+"3d("+this[c]+",1)"):a&&"translate"===c?b.push(c+"3d("+this[c]+",0)"):b.push(c+"("+this[c]+")"));return b.join(" ")}};d.fn.transition=d.fn.transit=function(a,b,c,f){var h=this,g=0,i=!0;"function"===typeof b&&(f=b,b=void 0);"function"===typeof c&&(f=c,c=void 0);"undefined"!==typeof a.easing&&(c=a.easing,delete a.easing);"undefined"!==typeof a.duration&&(b=a.duration,delete a.duration);"undefined"!==typeof a.complete&& | |||
(f=a.complete,delete a.complete);"undefined"!==typeof a.queue&&(i=a.queue,delete a.queue);"undefined"!==typeof a.delay&&(g=a.delay,delete a.delay);"undefined"===typeof b&&(b=d.fx.speeds._default);"undefined"===typeof c&&(c=d.cssEase._default);var b=n(b),j=q(a,b,c,g),l=d.transit.enabled&&e.transition?parseInt(b,10)+parseInt(g,10):0;if(0===l)return p(h,i,function(b){h.css(a);f&&f();b()}),h;var k={},m=function(b){var c=!1,g=function(){c&&h.unbind(o,g);0<l&&h.each(function(){this.style[e.transition]= | |||
k[this]||null});"function"===typeof f&&f.apply(h);"function"===typeof b&&b()};0<l&&o&&d.transit.useTransitionEnd?(c=!0,h.bind(o,g)):window.setTimeout(g,l);h.each(function(){0<l&&(this.style[e.transition]=j);d(this).css(a)})};p(h,i,function(a){var b=0;"MozTransition"===e.transition&&25>b&&(b=25);window.setTimeout(function(){m(a)},b)});return this};d.transit.getTransitionValue=q})(jQuery); |
@@ -1,496 +0,0 @@ | |||
// ----------------------------------------------------------------------------------- | |||
// | |||
// Lightbox v2.05 | |||
// by Lokesh Dhakar - http://www.lokeshdhakar.com | |||
// Last Modification: 11/16/11 | |||
// | |||
// For more information, visit: | |||
// http://lokeshdhakar.com/projects/lightbox2/ | |||
// | |||
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ | |||
// - Free for use in both personal and commercial projects | |||
// - Attribution requires leaving author name, author link, and the license info intact. | |||
// | |||
// Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. | |||
// Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous. | |||
// | |||
// ----------------------------------------------------------------------------------- | |||
/* | |||
Table of Contents | |||
----------------- | |||
Configuration | |||
Lightbox Class Declaration | |||
- initialize() | |||
- updateImageList() | |||
- start() | |||
- changeImage() | |||
- resizeImageContainer() | |||
- showImage() | |||
- updateDetails() | |||
- updateNav() | |||
- enableKeyboardNav() | |||
- disableKeyboardNav() | |||
- keyboardAction() | |||
- preloadNeighborImages() | |||
- end() | |||
Function Calls | |||
- document.observe() | |||
*/ | |||
// ----------------------------------------------------------------------------------- | |||
// | |||
// Configurationl | |||
// | |||
LightboxOptions = Object.extend({ | |||
fileLoadingImage: 'images/loading.gif', | |||
fileBottomNavCloseImage: 'images/closelabel.gif', | |||
overlayOpacity: 0.8, // controls transparency of shadow overlay | |||
animate: true, // toggles resizing animations | |||
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest) | |||
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable | |||
// When grouping images this is used to write: Image # of #. | |||
// Change it for non-english localization | |||
labelImage: "Image", | |||
labelOf: "of" | |||
}, window.LightboxOptions || {}); | |||
// ----------------------------------------------------------------------------------- | |||
var Lightbox = Class.create(); | |||
Lightbox.prototype = { | |||
imageArray: [], | |||
activeImage: undefined, | |||
// initialize() | |||
// Constructor runs on completion of the DOM loading. Calls updateImageList and then | |||
// the function inserts html at the bottom of the page which is used to display the shadow | |||
// overlay and the image container. | |||
// | |||
initialize: function() { | |||
this.updateImageList(); | |||
this.keyboardAction = this.keyboardAction.bindAsEventListener(this); | |||
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10; | |||
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; | |||
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0; | |||
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration | |||
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension. | |||
// If animations are turned off, it will be hidden as to prevent a flicker of a | |||
// white 250 by 250 box. | |||
var size = (LightboxOptions.animate ? 250 : 1) + 'px'; | |||
// Code inserts html at the bottom of the page that looks similar to this: | |||
// | |||
// <div id="overlay"></div> | |||
// <div id="lightbox"> | |||
// <div id="outerImageContainer"> | |||
// <div id="imageContainer"> | |||
// <img id="lightboxImage"> | |||
// <div style="" id="hoverNav"> | |||
// <a href="#" id="prevLink"></a> | |||
// <a href="#" id="nextLink"></a> | |||
// </div> | |||
// <div id="loading"> | |||
// <a href="#" id="loadingLink"> | |||
// <img src="images/loading.gif"> | |||
// </a> | |||
// </div> | |||
// </div> | |||
// </div> | |||
// <div id="imageDataContainer"> | |||
// <div id="imageData"> | |||
// <div id="imageDetails"> | |||
// <span id="caption"></span> | |||
// <span id="numberDisplay"></span> | |||
// </div> | |||
// <div id="bottomNav"> | |||
// <a href="#" id="bottomNavClose"> | |||
// <img src="images/close.gif"> | |||
// </a> | |||
// </div> | |||
// </div> | |||
// </div> | |||
// </div> | |||
var objBody = $$('body')[0]; | |||
objBody.appendChild(Builder.node('div',{id:'overlay'})); | |||
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [ | |||
Builder.node('div',{id:'outerImageContainer'}, | |||
Builder.node('div',{id:'imageContainer'}, [ | |||
Builder.node('img',{id:'lightboxImage'}), | |||
Builder.node('div',{id:'hoverNav'}, [ | |||
Builder.node('a',{id:'prevLink', href: '#' }), | |||
Builder.node('a',{id:'nextLink', href: '#' }) | |||
]), | |||
Builder.node('div',{id:'loading'}, | |||
Builder.node('a',{id:'loadingLink', href: '#' }, | |||
Builder.node('img', {src: LightboxOptions.fileLoadingImage}) | |||
) | |||
) | |||
]) | |||
), | |||
Builder.node('div', {id:'imageDataContainer'}, | |||
Builder.node('div',{id:'imageData'}, [ | |||
Builder.node('div',{id:'imageDetails'}, [ | |||
Builder.node('span',{id:'caption'}), | |||
Builder.node('span',{id:'numberDisplay'}) | |||
]), | |||
Builder.node('div',{id:'bottomNav'}, | |||
Builder.node('a',{id:'bottomNavClose', href: '#' }, | |||
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage }) | |||
) | |||
) | |||
]) | |||
) | |||
])); | |||
$('overlay').hide().observe('click', (function() { this.end(); }).bind(this)); | |||
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this)); | |||
$('outerImageContainer').setStyle({ width: size, height: size }); | |||
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this)); | |||
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this)); | |||
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); | |||
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); | |||
var th = this; | |||
(function(){ | |||
var ids = | |||
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + | |||
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose'; | |||
$w(ids).each(function(id){ th[id] = $(id); }); | |||
}).defer(); | |||
}, | |||
// | |||
// updateImageList() | |||
// Loops through anchor tags looking for 'lightbox' references and applies onclick | |||
// events to appropriate links. You can rerun after dynamically adding images w/ajax. | |||
// | |||
updateImageList: function() { | |||
this.updateImageList = Prototype.emptyFunction; | |||
document.observe('click', (function(event){ | |||
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]'); | |||
if (target) { | |||
event.stop(); | |||
this.start(target); | |||
} | |||
}).bind(this)); | |||
}, | |||
// | |||
// start() | |||
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray. | |||
// | |||
start: function(imageLink) { | |||
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); | |||
// stretch overlay to fill page and fade in | |||
var arrayPageSize = this.getPageSize(); | |||
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); | |||
new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity }); | |||
this.imageArray = []; | |||
var imageNum = 0; | |||
if ((imageLink.getAttribute("rel") == 'lightbox')){ | |||
// if image is NOT part of a set, add single image to imageArray | |||
this.imageArray.push([imageLink.href, imageLink.title]); | |||
} else { | |||
// if image is part of a set.. | |||
this.imageArray = | |||
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]'). | |||
collect(function(anchor){ return [anchor.href, anchor.title]; }). | |||
uniq(); | |||
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; } | |||
} | |||
// calculate top and left offset for the lightbox | |||
var arrayPageScroll = document.viewport.getScrollOffsets(); | |||
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10); | |||
var lightboxLeft = arrayPageScroll[0]; | |||
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show(); | |||
this.changeImage(imageNum); | |||
}, | |||
// | |||
// changeImage() | |||
// Hide most elements and preload image in preparation for resizing image container. | |||
// | |||
changeImage: function(imageNum) { | |||
this.activeImage = imageNum; // update global var | |||
// hide elements during transition | |||
if (LightboxOptions.animate) this.loading.show(); | |||
this.lightboxImage.hide(); | |||
this.hoverNav.hide(); | |||
this.prevLink.hide(); | |||
this.nextLink.hide(); | |||
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx | |||
this.imageDataContainer.setStyle({opacity: .0001}); | |||
this.numberDisplay.hide(); | |||
var imgPreloader = new Image(); | |||
// once image is preloaded, resize image container | |||
imgPreloader.onload = (function(){ | |||
this.lightboxImage.src = this.imageArray[this.activeImage][0]; | |||
/*Bug Fixed by Andy Scott*/ | |||
this.lightboxImage.width = imgPreloader.width; | |||
this.lightboxImage.height = imgPreloader.height; | |||
/*End of Bug Fix*/ | |||
this.resizeImageContainer(imgPreloader.width, imgPreloader.height); | |||
}).bind(this); | |||
imgPreloader.src = this.imageArray[this.activeImage][0]; | |||
}, | |||
// | |||
// resizeImageContainer() | |||
// | |||
resizeImageContainer: function(imgWidth, imgHeight) { | |||
// get current width and height | |||
var widthCurrent = this.outerImageContainer.getWidth(); | |||
var heightCurrent = this.outerImageContainer.getHeight(); | |||
// get new width and height | |||
var widthNew = (imgWidth + LightboxOptions.borderSize * 2); | |||
var heightNew = (imgHeight + LightboxOptions.borderSize * 2); | |||
// scalars based on change from old to new | |||
var xScale = (widthNew / widthCurrent) * 100; | |||
var yScale = (heightNew / heightCurrent) * 100; | |||
// calculate size difference between new and old image, and resize if necessary | |||
var wDiff = widthCurrent - widthNew; | |||
var hDiff = heightCurrent - heightNew; | |||
if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); | |||
if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); | |||
// if new and old image are same size and no scaling transition is necessary, | |||
// do a quick pause to prevent image flicker. | |||
var timeout = 0; | |||
if ((hDiff == 0) && (wDiff == 0)){ | |||
timeout = 100; | |||
if (Prototype.Browser.IE) timeout = 250; | |||
} | |||
(function(){ | |||
this.prevLink.setStyle({ height: imgHeight + 'px' }); | |||
this.nextLink.setStyle({ height: imgHeight + 'px' }); | |||
this.imageDataContainer.setStyle({ width: widthNew + 'px' }); | |||
this.showImage(); | |||
}).bind(this).delay(timeout / 1000); | |||
}, | |||
// | |||
// showImage() | |||
// Display image and begin preloading neighbors. | |||
// | |||
showImage: function(){ | |||
this.loading.hide(); | |||
new Effect.Appear(this.lightboxImage, { | |||
duration: this.resizeDuration, | |||
queue: 'end', | |||
afterFinish: (function(){ this.updateDetails(); }).bind(this) | |||
}); | |||
this.preloadNeighborImages(); | |||
}, | |||
// | |||
// updateDetails() | |||
// Display caption, image number, and bottom nav. | |||
// | |||
updateDetails: function() { | |||
this.caption.update(this.imageArray[this.activeImage][1]).show(); | |||
// if image is part of set display 'Image x of x' | |||
if (this.imageArray.length > 1){ | |||
this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show(); | |||
} | |||
new Effect.Parallel( | |||
[ | |||
new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), | |||
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) | |||
], | |||
{ | |||
duration: this.resizeDuration, | |||
afterFinish: (function() { | |||
// update overlay size and update nav | |||
var arrayPageSize = this.getPageSize(); | |||
this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); | |||
this.updateNav(); | |||
}).bind(this) | |||
} | |||
); | |||
}, | |||
// | |||
// updateNav() | |||
// Display appropriate previous and next hover navigation. | |||
// | |||
updateNav: function() { | |||
this.hoverNav.show(); | |||
// if not first image in set, display prev image button | |||
if (this.activeImage > 0) this.prevLink.show(); | |||
// if not last image in set, display next image button | |||
if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show(); | |||
this.enableKeyboardNav(); | |||
}, | |||
// | |||
// enableKeyboardNav() | |||
// | |||
enableKeyboardNav: function() { | |||
document.observe('keydown', this.keyboardAction); | |||
}, | |||
// | |||
// disableKeyboardNav() | |||
// | |||
disableKeyboardNav: function() { | |||
document.stopObserving('keydown', this.keyboardAction); | |||
}, | |||
// | |||
// keyboardAction() | |||
// | |||
keyboardAction: function(event) { | |||
var keycode = event.keyCode; | |||
var escapeKey; | |||
if (event.DOM_VK_ESCAPE) { // mozilla | |||
escapeKey = event.DOM_VK_ESCAPE; | |||
} else { // ie | |||
escapeKey = 27; | |||
} | |||
var key = String.fromCharCode(keycode).toLowerCase(); | |||
if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox | |||
this.end(); | |||
} else if ((key == 'p') || (keycode == 37)){ // display previous image | |||
if (this.activeImage != 0){ | |||
this.disableKeyboardNav(); | |||
this.changeImage(this.activeImage - 1); | |||
} | |||
} else if ((key == 'n') || (keycode == 39)){ // display next image | |||
if (this.activeImage != (this.imageArray.length - 1)){ | |||
this.disableKeyboardNav(); | |||
this.changeImage(this.activeImage + 1); | |||
} | |||
} | |||
}, | |||
// | |||
// preloadNeighborImages() | |||
// Preload previous and next images. | |||
// | |||
preloadNeighborImages: function(){ | |||
var preloadNextImage, preloadPrevImage; | |||
if (this.imageArray.length > this.activeImage + 1){ | |||
preloadNextImage = new Image(); | |||
preloadNextImage.src = this.imageArray[this.activeImage + 1][0]; | |||
} | |||
if (this.activeImage > 0){ | |||
preloadPrevImage = new Image(); | |||
preloadPrevImage.src = this.imageArray[this.activeImage - 1][0]; | |||
} | |||
}, | |||
// | |||
// end() | |||
// | |||
end: function() { | |||
this.disableKeyboardNav(); | |||
this.lightbox.hide(); | |||
new Effect.Fade(this.overlay, { duration: this.overlayDuration }); | |||
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' }); | |||
}, | |||
// | |||
// getPageSize() | |||
// | |||
getPageSize: function() { | |||
var xScroll, yScroll; | |||
if (window.innerHeight && window.scrollMaxY) { | |||
xScroll = window.innerWidth + window.scrollMaxX; | |||
yScroll = window.innerHeight + window.scrollMaxY; | |||
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac | |||
xScroll = document.body.scrollWidth; | |||
yScroll = document.body.scrollHeight; | |||
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari | |||
xScroll = document.body.offsetWidth; | |||
yScroll = document.body.offsetHeight; | |||
} | |||
var windowWidth, windowHeight; | |||
if (self.innerHeight) { // all except Explorer | |||
if(document.documentElement.clientWidth){ | |||
windowWidth = document.documentElement.clientWidth; | |||
} else { | |||
windowWidth = self.innerWidth; | |||
} | |||
windowHeight = self.innerHeight; | |||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode | |||
windowWidth = document.documentElement.clientWidth; | |||
windowHeight = document.documentElement.clientHeight; | |||
} else if (document.body) { // other Explorers | |||
windowWidth = document.body.clientWidth; | |||
windowHeight = document.body.clientHeight; | |||
} | |||
// for small pages with total height less then height of the viewport | |||
if(yScroll < windowHeight){ | |||
pageHeight = windowHeight; | |||
} else { | |||
pageHeight = yScroll; | |||
} | |||
// for small pages with total width less then width of the viewport | |||
if(xScroll < windowWidth){ | |||
pageWidth = xScroll; | |||
} else { | |||
pageWidth = windowWidth; | |||
} | |||
return [pageWidth,pageHeight]; | |||
} | |||
} | |||
document.observe('dom:loaded', function () { new Lightbox(); }); |
@@ -1,497 +0,0 @@ | |||
// ----------------------------------------------------------------------------------- | |||
// | |||
// Lightbox v2.04 | |||
// by Lokesh Dhakar - http://www.lokeshdhakar.com | |||
// Last Modification: 2/9/08 | |||
// | |||
// For more information, visit: | |||
// http://lokeshdhakar.com/projects/lightbox2/ | |||
// | |||
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ | |||
// - Free for use in both personal and commercial projects | |||
// - Attribution requires leaving author name, author link, and the license info intact. | |||
// | |||
// Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. | |||
// Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous. | |||
// | |||
// ----------------------------------------------------------------------------------- | |||
/* | |||
Table of Contents | |||
----------------- | |||
Configuration | |||
Lightbox Class Declaration | |||
- initialize() | |||
- updateImageList() | |||
- start() | |||
- changeImage() | |||
- resizeImageContainer() | |||
- showImage() | |||
- updateDetails() | |||
- updateNav() | |||
- enableKeyboardNav() | |||
- disableKeyboardNav() | |||
- keyboardAction() | |||
- preloadNeighborImages() | |||
- end() | |||
Function Calls | |||
- document.observe() | |||
*/ | |||
// ----------------------------------------------------------------------------------- | |||
// | |||
// Configurationl | |||
// | |||
LightboxOptions = Object.extend({ | |||
fileLoadingImage: 'images/loading.gif', | |||
fileBottomNavCloseImage: 'images/closelabel.gif', | |||
overlayOpacity: 0.8, // controls transparency of shadow overlay | |||
animate: true, // toggles resizing animations | |||
resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest) | |||
borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable | |||
// When grouping images this is used to write: Image # of #. | |||
// Change it for non-english localization | |||
labelImage: "Image", | |||
labelOf: "of" | |||
}, window.LightboxOptions || {}); | |||
// ----------------------------------------------------------------------------------- | |||
var Lightbox = Class.create(); | |||
Lightbox.prototype = { | |||
imageArray: [], | |||
activeImage: undefined, | |||
// initialize() | |||
// Constructor runs on completion of the DOM loading. Calls updateImageList and then | |||
// the function inserts html at the bottom of the page which is used to display the shadow | |||
// overlay and the image container. | |||
// | |||
initialize: function() { | |||
this.updateImageList(); | |||
this.keyboardAction = this.keyboardAction.bindAsEventListener(this); | |||
if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10; | |||
if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; | |||
this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0; | |||
this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration | |||
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension. | |||
// If animations are turned off, it will be hidden as to prevent a flicker of a | |||
// white 250 by 250 box. | |||
var size = (LightboxOptions.animate ? 250 : 1) + 'px'; | |||
// Code inserts html at the bottom of the page that looks similar to this: | |||
// | |||
// <div id="overlay"></div> | |||
// <div id="lightbox"> | |||
// <div id="outerImageContainer"> | |||
// <div id="imageContainer"> | |||
// <img id="lightboxImage"> | |||
// <div style="" id="hoverNav"> | |||
// <a href="#" id="prevLink"></a> | |||
// <a href="#" id="nextLink"></a> | |||
// </div> | |||
// <div id="loading"> | |||
// <a href="#" id="loadingLink"> | |||
// <img src="images/loading.gif"> | |||
// </a> | |||
// </div> | |||
// </div> | |||
// </div> | |||
// <div id="imageDataContainer"> | |||
// <div id="imageData"> | |||
// <div id="imageDetails"> | |||
// <span id="caption"></span> | |||
// <span id="numberDisplay"></span> | |||
// </div> | |||
// <div id="bottomNav"> | |||
// <a href="#" id="bottomNavClose"> | |||
// <img src="images/close.gif"> | |||
// </a> | |||
// </div> | |||
// </div> | |||
// </div> | |||
// </div> | |||
var objBody = $$('body')[0]; | |||
objBody.appendChild(Builder.node('div',{id:'overlay'})); | |||
objBody.appendChild(Builder.node('div',{id:'lightbox'}, [ | |||
Builder.node('div',{id:'outerImageContainer'}, | |||
Builder.node('div',{id:'imageContainer'}, [ | |||
Builder.node('img',{id:'lightboxImage'}), | |||
Builder.node('div',{id:'hoverNav'}, [ | |||
Builder.node('a',{id:'prevLink', href: '#' }), | |||
Builder.node('a',{id:'nextLink', href: '#' }) | |||
]), | |||
Builder.node('div',{id:'loading'}, | |||
Builder.node('a',{id:'loadingLink', href: '#' }, | |||
Builder.node('img', {src: LightboxOptions.fileLoadingImage}) | |||
) | |||
) | |||
]) | |||
), | |||
Builder.node('div', {id:'imageDataContainer'}, | |||
Builder.node('div',{id:'imageData'}, [ | |||
Builder.node('div',{id:'imageDetails'}, [ | |||
Builder.node('span',{id:'caption'}), | |||
Builder.node('span',{id:'numberDisplay'}) | |||
]), | |||
Builder.node('div',{id:'bottomNav'}, | |||
Builder.node('a',{id:'bottomNavClose', href: '#' }, | |||
Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage }) | |||
) | |||
) | |||
]) | |||
) | |||
])); | |||
$('overlay').hide().observe('click', (function() { this.end(); }).bind(this)); | |||
$('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this)); | |||
$('outerImageContainer').setStyle({ width: size, height: size }); | |||
$('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this)); | |||
$('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this)); | |||
$('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); | |||
$('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); | |||
var th = this; | |||
(function(){ | |||
var ids = | |||
'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + | |||
'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose'; | |||
$w(ids).each(function(id){ th[id] = $(id); }); | |||
}).defer(); | |||
}, | |||
// | |||
// updateImageList() | |||
// Loops through anchor tags looking for 'lightbox' references and applies onclick | |||
// events to appropriate links. You can rerun after dynamically adding images w/ajax. | |||
// | |||
updateImageList: function() { | |||
this.updateImageList = Prototype.emptyFunction; | |||
document.observe('click', (function(event){ | |||
var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]'); | |||
if (target) { | |||
event.stop(); | |||
this.start(target); | |||
} | |||
}).bind(this)); | |||
}, | |||
// | |||
// start() | |||
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray. | |||
// | |||
start: function(imageLink) { | |||
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); | |||
// stretch overlay to fill page and fade in | |||
var arrayPageSize = this.getPageSize(); | |||
$('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); | |||
new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity }); | |||
this.imageArray = []; | |||
var imageNum = 0; | |||
if ((imageLink.rel == 'lightbox')){ | |||
// if image is NOT part of a set, add single image to imageArray | |||
this.imageArray.push([imageLink.href, imageLink.title]); | |||
} else { | |||
// if image is part of a set.. | |||
this.imageArray = | |||
$$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]'). | |||
collect(function(anchor){ return [anchor.href, anchor.title]; }). | |||
uniq(); | |||
while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; } | |||
} | |||
// calculate top and left offset for the lightbox | |||
var arrayPageScroll = document.viewport.getScrollOffsets(); | |||
var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10); | |||
var lightboxLeft = arrayPageScroll[0]; | |||
this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show(); | |||
this.changeImage(imageNum); | |||
}, | |||
// | |||
// changeImage() | |||
// Hide most elements and preload image in preparation for resizing image container. | |||
// | |||
changeImage: function(imageNum) { | |||
this.activeImage = imageNum; // update global var | |||
// hide elements during transition | |||
if (LightboxOptions.animate) this.loading.show(); | |||
this.lightboxImage.hide(); | |||
this.hoverNav.hide(); | |||
this.prevLink.hide(); | |||
this.nextLink.hide(); | |||
// HACK: Opera9 does not currently support scriptaculous opacity and appear fx | |||
this.imageDataContainer.setStyle({opacity: .0001}); | |||
this.numberDisplay.hide(); | |||
var imgPreloader = new Image(); | |||
// once image is preloaded, resize image container | |||
imgPreloader.onload = (function(){ | |||
this.lightboxImage.src = this.imageArray[this.activeImage][0]; | |||
this.resizeImageContainer(imgPreloader.width, imgPreloader.height); | |||
}).bind(this); | |||
imgPreloader.src = this.imageArray[this.activeImage][0]; | |||
}, | |||
// | |||
// resizeImageContainer() | |||
// | |||
resizeImageContainer: function(imgWidth, imgHeight) { | |||
// get current width and height | |||
var widthCurrent = this.outerImageContainer.getWidth(); | |||
var heightCurrent = this.outerImageContainer.getHeight(); | |||
// get new width and height | |||
var widthNew = (imgWidth + LightboxOptions.borderSize * 2); | |||
var heightNew = (imgHeight + LightboxOptions.borderSize * 2); | |||