Browse Source

More edits to the demo page. Also, bug fix for keyboard nav events being attached over and over.

master
Lokesh Dhakar 9 years ago
parent
commit
4452f2eb48
17 changed files with 528 additions and 1294 deletions
  1. +84
    -51
      coffee/lightbox.coffee
  2. +192
    -96
      css/screen.css
  3. BIN
      images/box.png
  4. BIN
      images/donate-button.gif
  5. BIN
      images/donate.png
  6. BIN
      images/download-icon.gif
  7. BIN
      images/favicon.gif
  8. BIN
      images/speech-bubbles.png
  9. +99
    -89
      index.html
  10. +19
    -0
      js/jquery.transit.min.js
  11. +0
    -496
      js/lightbox-bak.js
  12. +0
    -497
      js/lightbox-web.js
  13. +46
    -29
      js/lightbox.js
  14. +0
    -5
      js/modernizr-2.0.js
  15. +4
    -0
      js/modernizr-2.5.3.min.js
  16. BIN
      releases/lightbox2.5.zip
  17. +84
    -31
      sass/screen.sass

+ 84
- 51
coffee/lightbox.coffee View File

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

+ 192
- 96
css/screen.css View File

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


BIN
images/box.png View File

Before After
Width: 170  |  Height: 168  |  Size: 12 KiB

BIN
images/donate-button.gif View File

Before After
Width: 107  |  Height: 21  |  Size: 723 B

BIN
images/donate.png View File

Before After
Width: 259  |  Height: 97  |  Size: 5.0 KiB

BIN
images/download-icon.gif View File

Before After
Width: 22  |  Height: 22  |  Size: 1.1 KiB

BIN
images/favicon.gif View File

Before After
Width: 16  |  Height: 16  |  Size: 1.2 KiB

BIN
images/speech-bubbles.png View File

Before After
Width: 110  |  Height: 80  |  Size: 3.5 KiB

+ 99
- 89
index.html View File

@ -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>&lt;script type=&quot;text/javascript&quot; src=&quot;js/prototype.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/scriptaculous.js?load=effects,builder&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;
<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>&lt;script src=&quot;js/jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery-ui-1.8.18.custom.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.transit.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;
</code></pre>
</li>
<li>Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/lightbox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;
<li>Include the Lightbox CSS file.
<pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;
</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>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;
</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>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #3&lt;/a&gt;
@ -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>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;&quot;&gt;</code><br />
A quick fix to this problem is to append the <code>initLightbox()</code> to the onload attribute as so:<br />
<code>&lt;body onload=&quot;MM_preloadImages(&lsquo;/images/menu_on.gif&rsquo;)&hellip;;initLightbox()&quot;&gt;</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>&lt;a href="images/image-4.jpg" rel="lightbox" title="&amp;lt;a href=&amp;quot;link.html&amp;quot;&amp;gt;my link&amp;lt;/a&amp;gt;">Image&lt;/a&gt;</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>

+ 19
- 0
js/jquery.transit.min.js View File

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

+ 0
- 496
js/lightbox-bak.js View File

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