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

coffee/lightbox.coffee

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

css/screen.css

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

index.html

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

js/jquery.transit.min.js

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

js/lightbox-bak.js

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

js/lightbox-web.js

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