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

9 years ago · 4452f2eb48
--- a/coffee/lightbox.coffee
+++ b/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
--- a/css/screen.css
+++ b/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;
--- a/images/box.png
+++ b/images/box.png
--- a/images/donate-button.gif
+++ b/images/donate-button.gif
--- a/images/donate.png
+++ b/images/donate.png
--- a/images/download-icon.gif
+++ b/images/download-icon.gif
--- a/images/favicon.gif
+++ b/images/favicon.gif
--- a/images/speech-bubbles.png
+++ b/images/speech-bubbles.png
--- a/index.html
+++ b/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>
--- a/js/jquery.transit.min.js
+++ b/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);
--- a/js/lightbox-bak.js
+++ b/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); });