Club Drupal

/* $Id: lightbox.js,v 1.5.2.6.2.136 2010/09/24 08:39:40 snpower Exp $ */

/**

 * jQuery Lightbox

 * @author

 *   Stella Power, <http://drupal.org/user/66894>

 *

 * Based on Lightbox v2.03.3 by Lokesh Dhakar

 * <http://www.huddletogether.com/projects/lightbox2/>

 * Also partially based on the jQuery Lightbox by Warren Krewenki

 *   <http://warren.mesozen.com>

 *

 * Permission has been granted to Mark Ashmead & other Drupal Lightbox2 module

 * maintainers to distribute this file via Drupal.org

 * Under GPL license.

 *

 * Slideshow, iframe and video functionality added by Stella Power.

 */

var Lightbox;

(function($) {

Lightbox = {

  auto_modal : false,

  overlayOpacity : 0.8, // Controls transparency of shadow overlay.

  overlayColor : '000', // Controls colour of shadow overlay.

  disableCloseClick : true,

  // Controls the order of the lightbox resizing animation sequence.

  resizeSequence: 0, // 0: simultaneous, 1: width then height, 2: height then width.

  resizeSpeed: 'normal', // Controls the speed of the lightbox resizing animation.

  fadeInSpeed: 'normal', // Controls the speed of the image appearance.

  slideDownSpeed: 'slow', // Controls the speed of the image details appearance.

  minWidth: 240,

  borderSize : 10,

  boxColor : 'fff',

  fontColor : '000',

  topPosition : '',

  infoHeight: 20,

  alternative_layout : false,

  imageArray : [],

  imageNum : null,

  total : 0,

  activeImage : null,

  inprogress : false,

  disableResize : false,

  disableZoom : false,

  isZoomedIn : false,

  rtl : false,

  loopItems : false,

  keysClose : ['c', 'x', 27],

  keysPrevious : ['p', 37],

  keysNext : ['n', 39],

  keysZoom : ['z'],

  keysPlayPause : [32],

  // Slideshow options.

  slideInterval : 5000, // In milliseconds.

  showPlayPause : true,

  autoStart : true,

  autoExit : true,

  pauseOnNextClick : false, // True to pause the slideshow when the "Next" button is clicked.

  pauseOnPrevClick : true, // True to pause the slideshow when the "Prev" button is clicked.

  slideIdArray : [],

  slideIdCount : 0,

  isSlideshow : false,

  isPaused : false,

  loopSlides : false,

  // Iframe options.

  isLightframe : false,

  iframe_width : 600,

  iframe_height : 400,

  iframe_border : 1,

  // Video and modal options.

  enableVideo : false,

  flvPlayer : '/flvplayer.swf',

  flvFlashvars : '',

  isModal : false,

  isVideo : false,

  videoId : false,

  modalWidth : 400,

  modalHeight : 400,

  modalHTML : null,

  // initialize()

  // Constructor runs on completion of the DOM loading.

  // The function inserts html at the bottom of the page which is used

  // to display the shadow overlay and the image container.

  initialize: function() {

    var s = Drupal.settings.lightbox2;

    Lightbox.overlayOpacity = s.overlay_opacity;

    Lightbox.overlayColor = s.overlay_color;

    Lightbox.disableCloseClick = s.disable_close_click;

    Lightbox.resizeSequence = s.resize_sequence;

    Lightbox.resizeSpeed = s.resize_speed;

    Lightbox.fadeInSpeed = s.fade_in_speed;

    Lightbox.slideDownSpeed = s.slide_down_speed;

    Lightbox.borderSize = s.border_size;

    Lightbox.boxColor = s.box_color;

    Lightbox.fontColor = s.font_color;

    Lightbox.topPosition = s.top_position;

    Lightbox.rtl = s.rtl;

    Lightbox.loopItems = s.loop_items;

    Lightbox.keysClose = s.keys_close.split(" ");

    Lightbox.keysPrevious = s.keys_previous.split(" ");

    Lightbox.keysNext = s.keys_next.split(" ");

    Lightbox.keysZoom = s.keys_zoom.split(" ");

    Lightbox.keysPlayPause = s.keys_play_pause.split(" ");

    Lightbox.disableResize = s.disable_resize;

    Lightbox.disableZoom = s.disable_zoom;

    Lightbox.slideInterval = s.slideshow_interval;

    Lightbox.showPlayPause = s.show_play_pause;

    Lightbox.showCaption = s.show_caption;

    Lightbox.autoStart = s.slideshow_automatic_start;

    Lightbox.autoExit = s.slideshow_automatic_exit;

    Lightbox.pauseOnNextClick = s.pause_on_next_click;

    Lightbox.pauseOnPrevClick = s.pause_on_previous_click;

    Lightbox.loopSlides = s.loop_slides;

    Lightbox.alternative_layout = s.use_alt_layout;

    Lightbox.iframe_width = s.iframe_width;

    Lightbox.iframe_height = s.iframe_height;

    Lightbox.iframe_border = s.iframe_border;

    Lightbox.enableVideo = s.enable_video;

    if (s.enable_video) {

      Lightbox.flvPlayer = s.flvPlayer;

      Lightbox.flvFlashvars = s.flvFlashvars;

    }

    // Make the lightbox divs.

    var layout_class = (s.use_alt_layout ? 'lightbox2-alt-layout' : 'lightbox2-orig-layout');

    var output = '<div id="lightbox2-overlay" style="display: none;"></div>\

      <div id="lightbox" style="display: none;" class="' + layout_class + '">\

        <div id="outerImageContainer"></div>\

        <div id="imageDataContainer" class="clearfix">\

          <div id="imageData"></div>\

        </div>\

      </div>';

    var loading = '<div id="loading"><a href="#" id="loadingLink"></a></div>';

    var modal = '<div id="modalContainer" style="display: none;"></div>';

    var frame = '<div id="frameContainer" style="display: none;"></div>';

    var imageContainer = '<div id="imageContainer" style="display: none;"></div>';

    var details = '<div id="imageDetails"></div>';

    var bottomNav = '<div id="bottomNav"></div>';

    var image = '<img id="lightboxImage" alt="" />';

    var hoverNav = '<div id="hoverNav"><a id="prevLink" href="#"></a><a id="nextLink" href="#"></a></div>';

    var frameNav = '<div id="frameHoverNav"><a id="framePrevLink" href="#"></a><a id="frameNextLink" href="#"></a></div>';

    var hoverNav = '<div id="hoverNav"><a id="prevLink" title="' + Drupal.t('Previous') + '" href="#"></a><a id="nextLink" title="' + Drupal.t('Next') + '" href="#"></a></div>';

    var frameNav = '<div id="frameHoverNav"><a id="framePrevLink" title="' + Drupal.t('Previous') + '" href="#"></a><a id="frameNextLink" title="' + Drupal.t('Next') + '" href="#"></a></div>';

    var caption = '<span id="caption"></span>';

    var numberDisplay = '<span id="numberDisplay"></span>';

    var close = '<a id="bottomNavClose" title="' + Drupal.t('Close') + '" href="#"></a>';

    var zoom = '<a id="bottomNavZoom" href="#"></a>';

    var zoomOut = '<a id="bottomNavZoomOut" href="#"></a>';

    var pause = '<a id="lightshowPause" title="' + Drupal.t('Pause Slideshow') + '" href="#" style="display: none;"></a>';

    var play = '<a id="lightshowPlay" title="' + Drupal.t('Play Slideshow') + '" href="#" style="display: none;"></a>';

    $("body").append(output);

    $('#outerImageContainer').append(modal + frame + imageContainer + loading);

    if (!s.use_alt_layout) {

      $('#imageContainer').append(image + hoverNav);

      $('#imageData').append(details + bottomNav);

      $('#imageDetails').append(caption + numberDisplay);

      $('#bottomNav').append(frameNav + close + zoom + zoomOut + pause + play);

    }

    else {

      $('#outerImageContainer').append(bottomNav);

      $('#imageContainer').append(image);

      $('#bottomNav').append(close + zoom + zoomOut);

      $('#imageData').append(hoverNav + details);

      $('#imageDetails').append(caption + numberDisplay + pause + play);

    }

    // Setup onclick handlers.

    if (Lightbox.disableCloseClick) {

      $('#lightbox2-overlay').click(function() { Lightbox.end(); return false; } ).hide();

    }

    $('#loadingLink, #bottomNavClose').click(function() { Lightbox.end('forceClose'); return false; } );

    $('#prevLink, #framePrevLink').click(function() { Lightbox.changeData(Lightbox.activeImage - 1); return false; } );

    $('#nextLink, #frameNextLink').click(function() { Lightbox.changeData(Lightbox.activeImage + 1); return false; } );

    $('#bottomNavZoom').click(function() { Lightbox.changeData(Lightbox.activeImage, true); return false; } );

    $('#bottomNavZoomOut').click(function() { Lightbox.changeData(Lightbox.activeImage, false); return false; } );

    $('#lightshowPause').click(function() { Lightbox.togglePlayPause("lightshowPause", "lightshowPlay"); return false; } );

    $('#lightshowPlay').click(function() { Lightbox.togglePlayPause("lightshowPlay", "lightshowPause"); return false; } );

    // Fix positioning.

    $('#prevLink, #nextLink, #framePrevLink, #frameNextLink').css({ 'paddingTop': Lightbox.borderSize + 'px'});

    $('#imageContainer, #frameContainer, #modalContainer').css({ 'padding': Lightbox.borderSize + 'px'});

    $('#outerImageContainer, #imageDataContainer, #bottomNavClose').css({'backgroundColor': '#' + Lightbox.boxColor, 'color': '#'+Lightbox.fontColor});

    if (Lightbox.alternative_layout) {

      $('#bottomNavZoom, #bottomNavZoomOut').css({'bottom': Lightbox.borderSize + 'px', 'right': Lightbox.borderSize + 'px'});

    }

    else if (Lightbox.rtl == 1 && $.browser.msie) {

      $('#bottomNavZoom, #bottomNavZoomOut').css({'left': '0px'});

    }

    // Force navigation links to always be displayed

    if (s.force_show_nav) {

      $('#prevLink, #nextLink').addClass("force_show_nav");

    }

  },

  // initList()

  // Loops through anchor tags looking for 'lightbox', 'lightshow' and

  // 'lightframe', etc, references and applies onclick events to appropriate

  // links. You can rerun after dynamically adding images w/ajax.

  initList : function(context) {

    if (context == undefined || context == null) {

      context = document;

    }

    // Attach lightbox to any links with rel 'lightbox', 'lightshow' or

    // 'lightframe', etc.

    $("a[rel^='lightbox']:not(.lightbox-processed), area[rel^='lightbox']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) {

      if (Lightbox.disableCloseClick) {

        $('#lightbox').unbind('click');

        $('#lightbox').click(function() { Lightbox.end('forceClose'); } );

      }

      Lightbox.start(this, false, false, false, false);

      if (e.preventDefault) { e.preventDefault(); }

      return false;

    });

    $("a[rel^='lightshow']:not(.lightbox-processed), area[rel^='lightshow']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) {

      if (Lightbox.disableCloseClick) {

        $('#lightbox').unbind('click');

        $('#lightbox').click(function() { Lightbox.end('forceClose'); } );

      }

      Lightbox.start(this, true, false, false, false);

      if (e.preventDefault) { e.preventDefault(); }

      return false;

    });

    $("a[rel^='lightframe']:not(.lightbox-processed), area[rel^='lightframe']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) {

      if (Lightbox.disableCloseClick) {

        $('#lightbox').unbind('click');

        $('#lightbox').click(function() { Lightbox.end('forceClose'); } );

      }

      Lightbox.start(this, false, true, false, false);

      if (e.preventDefault) { e.preventDefault(); }

      return false;

    });

    if (Lightbox.enableVideo) {

      $("a[rel^='lightvideo']:not(.lightbox-processed), area[rel^='lightvideo']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) {

        if (Lightbox.disableCloseClick) {

          $('#lightbox').unbind('click');

          $('#lightbox').click(function() { Lightbox.end('forceClose'); } );

        }

        Lightbox.start(this, false, false, true, false);

        if (e.preventDefault) { e.preventDefault(); }

        return false;

      });

    }

    $("a[rel^='lightmodal']:not(.lightbox-processed), area[rel^='lightmodal']:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) {

      $('#lightbox').unbind('click');

      // Add classes from the link to the lightbox div - don't include lightbox-processed

      $('#lightbox').addClass($(this).attr('class'));

      $('#lightbox').removeClass('lightbox-processed');

      Lightbox.start(this, false, false, false, true);

      if (e.preventDefault) { e.preventDefault(); }

      return false;

    });

    $("#lightboxAutoModal:not(.lightbox-processed)", context).addClass('lightbox-processed').click(function(e) {

      Lightbox.auto_modal = true;

      $('#lightbox').unbind('click');

      Lightbox.start(this, false, false, false, true);

      if (e.preventDefault) { e.preventDefault(); }

      return false;

    });

  },

  // start()

  // Display overlay and lightbox. If image is part of a set, add siblings to

  // imageArray.

  start: function(imageLink, slideshow, lightframe, lightvideo, lightmodal) {

    Lightbox.isPaused = !Lightbox.autoStart;

    // Replaces hideSelectBoxes() and hideFlash() calls in original lightbox2.

    Lightbox.toggleSelectsFlash('hide');

    // Stretch overlay to fill page and fade in.

    var arrayPageSize = Lightbox.getPageSize();

    $("#lightbox2-overlay").hide().css({

      'width': '100%',

      'zIndex': '10090',

      'height': arrayPageSize[1] + 'px',

      'backgroundColor' : '#' + Lightbox.overlayColor

    });

    // Detect OS X FF2 opacity + flash issue.

    if (lightvideo && this.detectMacFF2()) {

      $("#lightbox2-overlay").removeClass("overlay_default");

      $("#lightbox2-overlay").addClass("overlay_macff2");

      $("#lightbox2-overlay").css({'opacity' : null});

    }

    else {

      $("#lightbox2-overlay").removeClass("overlay_macff2");

      $("#lightbox2-overlay").addClass("overlay_default");

      $("#lightbox2-overlay").css({'opacity' : Lightbox.overlayOpacity});

    }

    $("#lightbox2-overlay").fadeIn(Lightbox.fadeInSpeed);

    Lightbox.isSlideshow = slideshow;

    Lightbox.isLightframe = lightframe;

    Lightbox.isVideo = lightvideo;

    Lightbox.isModal = lightmodal;

    Lightbox.imageArray = [];

    Lightbox.imageNum = 0;

    var anchors = $(imageLink.tagName);

    var anchor = null;

    var rel_parts = Lightbox.parseRel(imageLink);

    var rel = rel_parts["rel"];

    var rel_group = rel_parts["group"];

    var title = (rel_parts["title"] ? rel_parts["title"] : imageLink.title);

    var rel_style = null;

    var i = 0;

    if (rel_parts["flashvars"]) {

      Lightbox.flvFlashvars = Lightbox.flvFlashvars + '&' + rel_parts["flashvars"];

    }

    // Set the title for image alternative text.

    var alt = imageLink.title;

    if (!alt) {

      var img = $(imageLink).find("img");

      if (img && $(img).attr("alt")) {

        alt = $(img).attr("alt");

      }

      else {

        alt = title;

      }

    }

    if ($(imageLink).attr('id') == 'lightboxAutoModal') {

      rel_style = rel_parts["style"];

      Lightbox.imageArray.push(['#lightboxAutoModal > *', title, alt, rel_style, 1]);

    }

    else {

      // Handle lightbox images with no grouping.

      if ((rel == 'lightbox' || rel == 'lightshow') && !rel_group) {

        Lightbox.imageArray.push([imageLink.href, title, alt]);

      }

      // Handle other items with no grouping.

      else if (!rel_group) {

        rel_style = rel_parts["style"];

        Lightbox.imageArray.push([imageLink.href, title, alt, rel_style]);

      }

      // Handle grouped items.

      else {

        // Loop through anchors and add them to imageArray.

        for (i = 0; i < anchors.length; i++) {

          anchor = anchors[i];

          if (anchor.href && typeof(anchor.href) == "string" && $(anchor).attr('rel')) {

            var rel_data = Lightbox.parseRel(anchor);

            var anchor_title = (rel_data["title"] ? rel_data["title"] : anchor.title);

            img_alt = anchor.title;

            if (!img_alt) {

              var anchor_img = $(anchor).find("img");

              if (anchor_img && $(anchor_img).attr("alt")) {

                img_alt = $(anchor_img).attr("alt");

              }

              else {

                img_alt = title;

              }

            }

            if (rel_data["rel"] == rel) {

              if (rel_data["group"] == rel_group) {

                if (Lightbox.isLightframe || Lightbox.isModal || Lightbox.isVideo) {

                  rel_style = rel_data["style"];

                }

                Lightbox.imageArray.push([anchor.href, anchor_title, img_alt, rel_style]);

              }

            }

          }

        }

        // Remove duplicates.

        for (i = 0; i < Lightbox.imageArray.length; i++) {

          for (j = Lightbox.imageArray.length-1; j > i; j--) {

            if (Lightbox.imageArray[i][0] == Lightbox.imageArray[j][0]) {

              Lightbox.imageArray.splice(j,1);

            }

          }

        }

        while (Lightbox.imageArray[Lightbox.imageNum][0] != imageLink.href) {

          Lightbox.imageNum++;

        }

      }

    }

    if (Lightbox.isSlideshow && Lightbox.showPlayPause && Lightbox.isPaused) {

      $('#lightshowPlay').show();

      $('#lightshowPause').hide();

    }

    // Calculate top and left offset for the lightbox.

    var arrayPageScroll = Lightbox.getPageScroll();

    var lightboxTop = arrayPageScroll[1] + (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1;

    var lightboxLeft = arrayPageScroll[0];

    $('#frameContainer, #modalContainer, #lightboxImage').hide();

    $('#hoverNav, #prevLink, #nextLink, #frameHoverNav, #framePrevLink, #frameNextLink').hide();

    $('#imageDataContainer, #numberDisplay, #bottomNavZoom, #bottomNavZoomOut').hide();

    $('#outerImageContainer').css({'width': '250px', 'height': '250px'});

    $('#lightbox').css({

      'zIndex': '10500',

      'top': lightboxTop + 'px',

      'left': lightboxLeft + 'px'

    }).show();

    Lightbox.total = Lightbox.imageArray.length;

    Lightbox.changeData(Lightbox.imageNum);

  },

  // changeData()

  // Hide most elements and preload image in preparation for resizing image

  // container.

  changeData: function(imageNum, zoomIn) {

    if (Lightbox.inprogress === false) {

      if (Lightbox.total > 1 && ((Lightbox.isSlideshow && Lightbox.loopSlides) || (!Lightbox.isSlideshow && Lightbox.loopItems))) {

        if (imageNum >= Lightbox.total) imageNum = 0;

        if (imageNum < 0) imageNum = Lightbox.total - 1;

      }

      if (Lightbox.isSlideshow) {

        for (var i = 0; i < Lightbox.slideIdCount; i++) {

          window.clearTimeout(Lightbox.slideIdArray[i]);

        }

      }

      Lightbox.inprogress = true;

      Lightbox.activeImage = imageNum;

      if (Lightbox.disableResize && !Lightbox.isSlideshow) {

        zoomIn = true;

      }

      Lightbox.isZoomedIn = zoomIn;

      // Hide elements during transition.

      $('#loading').css({'zIndex': '10500'}).show();

      if (!Lightbox.alternative_layout) {

        $('#imageContainer').hide();

      }

      $('#frameContainer, #modalContainer, #lightboxImage').hide();

      $('#hoverNav, #prevLink, #nextLink, #frameHoverNav, #framePrevLink, #frameNextLink').hide();

      $('#imageDataContainer, #numberDisplay, #bottomNavZoom, #bottomNavZoomOut').hide();

      // Preload image content, but not iframe pages.

      if (!Lightbox.isLightframe && !Lightbox.isVideo && !Lightbox.isModal) {

        $("#lightbox #imageDataContainer").removeClass('lightbox2-alt-layout-data');

        imgPreloader = new Image();

        imgPreloader.onerror = function() { Lightbox.imgNodeLoadingError(this); };

        imgPreloader.onload = function() {

          var photo = document.getElementById('lightboxImage');

          photo.src = Lightbox.imageArray[Lightbox.activeImage][0];

          photo.alt = Lightbox.imageArray[Lightbox.activeImage][2];

          var imageWidth = imgPreloader.width;

          var imageHeight = imgPreloader.height;

          // Resize code.

          var arrayPageSize = Lightbox.getPageSize();

          var targ = { w:arrayPageSize[2] - (Lightbox.borderSize * 2), h:arrayPageSize[3] - (Lightbox.borderSize * 6) - (Lightbox.infoHeight * 4) - (arrayPageSize[3] / 10) };

          var orig = { w:imgPreloader.width, h:imgPreloader.height };

          // Image is very large, so show a smaller version of the larger image

          // with zoom button.

          if (zoomIn !== true) {

            var ratio = 1.0; // Shrink image with the same aspect.

            $('#bottomNavZoomOut, #bottomNavZoom').hide();

            if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) {

              ratio = ((targ.w / orig.w) < (targ.h / orig.h)) ? targ.w / orig.w : targ.h / orig.h;

              if (!Lightbox.disableZoom && !Lightbox.isSlideshow) {

                $('#bottomNavZoom').css({'zIndex': '10500'}).show();

              }

            }

            imageWidth  = Math.floor(orig.w * ratio);

            imageHeight = Math.floor(orig.h * ratio);

          }

          else {

            $('#bottomNavZoom').hide();

            // Only display zoom out button if the image is zoomed in already.

            if ((orig.w >= targ.w || orig.h >= targ.h) && orig.h && orig.w) {

              // Only display zoom out button if not a slideshow and if the

              // buttons aren't disabled.

              if (!Lightbox.disableResize && Lightbox.isSlideshow === false && !Lightbox.disableZoom) {

                $('#bottomNavZoomOut').css({'zIndex': '10500'}).show();

              }

            }

          }

          photo.style.width = (imageWidth) + 'px';

          photo.style.height = (imageHeight) + 'px';

          Lightbox.resizeContainer(imageWidth, imageHeight);

          // Clear onLoad, IE behaves irratically with animated gifs otherwise.

          imgPreloader.onload = function() {};

        };

        imgPreloader.src = Lightbox.imageArray[Lightbox.activeImage][0];

        imgPreloader.alt = Lightbox.imageArray[Lightbox.activeImage][2];

      }

      // Set up frame size, etc.

      else if (Lightbox.isLightframe) {

        $("#lightbox #imageDataContainer").addClass('lightbox2-alt-layout-data');

        var src = Lightbox.imageArray[Lightbox.activeImage][0];

        $('#frameContainer').html('<iframe id="lightboxFrame" style="display: none;" src="'+src+'"></iframe>');

        // Enable swf support in Gecko browsers.

        if ($.browser.mozilla && src.indexOf('.swf') != -1) {

          setTimeout(function () {

            document.getElementById("lightboxFrame").src = Lightbox.imageArray[Lightbox.activeImage][0];

          }, 1000);

        }

        if (!Lightbox.iframe_border) {

          $('#lightboxFrame').css({'border': 'none'});

          $('#lightboxFrame').attr('frameborder', '0');

        }

        var iframe = document.getElementById('lightboxFrame');

        var iframeStyles = Lightbox.imageArray[Lightbox.activeImage][3];

        iframe = Lightbox.setStyles(iframe, iframeStyles);

        Lightbox.resizeContainer(parseInt(iframe.width, 10), parseInt(iframe.height, 10));

      }

      else if (Lightbox.isVideo || Lightbox.isModal) {

        $("#lightbox #imageDataContainer").addClass('lightbox2-alt-layout-data');

        var container = document.getElementById('modalContainer');

        var modalStyles = Lightbox.imageArray[Lightbox.activeImage][3];

        container = Lightbox.setStyles(container, modalStyles);

        if (Lightbox.isVideo) {

          Lightbox.modalHeight =  parseInt(container.height, 10) - 10;

          Lightbox.modalWidth =  parseInt(container.width, 10) - 10;

          Lightvideo.startVideo(Lightbox.imageArray[Lightbox.activeImage][0]);

        }

        Lightbox.resizeContainer(parseInt(container.width, 10), parseInt(container.height, 10));

      }

    }

  },

  // imgNodeLoadingError()

  imgNodeLoadingError: function(image) {

    var s = Drupal.settings.lightbox2;

    var original_image = Lightbox.imageArray[Lightbox.activeImage][0];

    if (s.display_image_size !== "") {

      original_image = original_image.replace(new RegExp("."+s.display_image_size), "");

    }

    Lightbox.imageArray[Lightbox.activeImage][0] = original_image;

    image.onerror = function() { Lightbox.imgLoadingError(image); };

    image.src = original_image;

  },

  // imgLoadingError()

  imgLoadingError: function(image) {

    var s = Drupal.settings.lightbox2;

    Lightbox.imageArray[Lightbox.activeImage][0] = s.default_image;

    image.src = s.default_image;

  },

  // resizeContainer()

  resizeContainer: function(imgWidth, imgHeight) {

    imgWidth = (imgWidth < Lightbox.minWidth ? Lightbox.minWidth : imgWidth);

    this.widthCurrent = $('#outerImageContainer').width();

    this.heightCurrent = $('#outerImageContainer').height();

    var widthNew = (imgWidth  + (Lightbox.borderSize * 2));

    var heightNew = (imgHeight  + (Lightbox.borderSize * 2));

    // Scalars based on change from old to new.

    this.xScale = ( widthNew / this.widthCurrent) * 100;

    this.yScale = ( heightNew / this.heightCurrent) * 100;

    // Calculate size difference between new and old image, and resize if

    // necessary.

    wDiff = this.widthCurrent - widthNew;

    hDiff = this.heightCurrent - heightNew;

    $('#modalContainer').css({'width': imgWidth, 'height': imgHeight});

    // Detect animation sequence.

    if (Lightbox.resizeSequence) {

      var animate1 = {width: widthNew};

      var animate2 = {height: heightNew};

      if (Lightbox.resizeSequence == 2) {

        animate1 = {height: heightNew};

        animate2 = {width: widthNew};

      }

      $('#outerImageContainer').animate(animate1, Lightbox.resizeSpeed).animate(animate2, Lightbox.resizeSpeed, 'linear', function() { Lightbox.showData(); });

    }

    // Simultaneous.

    else {

      $('#outerImageContainer').animate({'width': widthNew, 'height': heightNew}, Lightbox.resizeSpeed, 'linear', function() { Lightbox.showData(); });

    }

    // If new and old image are same size and no scaling transition is necessary

    // do a quick pause to prevent image flicker.

    if ((hDiff === 0) && (wDiff === 0)) {

      if ($.browser.msie) {

        Lightbox.pause(250);

      }

      else {

        Lightbox.pause(100);

      }

    }

    var s = Drupal.settings.lightbox2;

    if (!s.use_alt_layout) {

      $('#prevLink, #nextLink').css({'height': imgHeight + 'px'});

    }

    $('#imageDataContainer').css({'width': widthNew + 'px'});

  },

  // showData()

  // Display image and begin preloading neighbors.

  showData: function() {

    $('#loading').hide();

    if (Lightbox.isLightframe || Lightbox.isVideo || Lightbox.isModal) {

      Lightbox.updateDetails();

      if (Lightbox.isLightframe) {

        $('#frameContainer').show();

        if ($.browser.safari || Lightbox.fadeInSpeed === 0) {

          $('#lightboxFrame').css({'zIndex': '10500'}).show();

        }

        else {

          $('#lightboxFrame').css({'zIndex': '10500'}).fadeIn(Lightbox.fadeInSpeed);

        }

      }

      else {

        if (Lightbox.isVideo) {

          $("#modalContainer").html(Lightbox.modalHTML).click(function(){return false;}).css('zIndex', '10500').show();

        }

        else {

          var src = unescape(Lightbox.imageArray[Lightbox.activeImage][0]);

          if (Lightbox.imageArray[Lightbox.activeImage][4]) {

            $(src).appendTo("#modalContainer");

            $('#modalContainer').css({'zIndex': '10500'}).show();

          }

          else {

            // Use a callback to show the new image, otherwise you get flicker.

            $("#modalContainer").hide().load(src, function () {$('#modalContainer').css({'zIndex': '10500'}).show();});

          }

          $('#modalContainer').unbind('click');

        }

        // This might be needed in the Lightframe section above.

        //$('#modalContainer').css({'zIndex': '10500'}).show();

      }

    }

    // Handle display of image content.

    else {

      $('#imageContainer').show();

      if ($.browser.safari || Lightbox.fadeInSpeed === 0) {

        $('#lightboxImage').css({'zIndex': '10500'}).show();

      }

      else {

        $('#lightboxImage').css({'zIndex': '10500'}).fadeIn(Lightbox.fadeInSpeed);

      }

      Lightbox.updateDetails();

      this.preloadNeighborImages();

    }

    Lightbox.inprogress = false;

    // Slideshow specific stuff.

    if (Lightbox.isSlideshow) {

      if (!Lightbox.loopSlides && Lightbox.activeImage == (Lightbox.total - 1)) {

        if (Lightbox.autoExit) {

          Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function () {Lightbox.end('slideshow');}, Lightbox.slideInterval);

        }

      }

      else {

        if (!Lightbox.isPaused && Lightbox.total > 1) {

          Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function () {Lightbox.changeData(Lightbox.activeImage + 1);}, Lightbox.slideInterval);

        }

      }

      if (Lightbox.showPlayPause && Lightbox.total > 1 && !Lightbox.isPaused) {

        $('#lightshowPause').show();

        $('#lightshowPlay').hide();

      }

      else if (Lightbox.showPlayPause && Lightbox.total > 1) {

        $('#lightshowPause').hide();

        $('#lightshowPlay').show();

      }

    }

    // Adjust the page overlay size.

    var arrayPageSize = Lightbox.getPageSize();

    var arrayPageScroll = Lightbox.getPageScroll();

    var pageHeight = arrayPageSize[1];

    if (Lightbox.isZoomedIn && arrayPageSize[1] > arrayPageSize[3]) {

      var lightboxTop = (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1;

      pageHeight = pageHeight + arrayPageScroll[1] + lightboxTop;

    }

    $('#lightbox2-overlay').css({'height': pageHeight + 'px', 'width': arrayPageSize[0] + 'px'});

    // Gecko browsers (e.g. Firefox, SeaMonkey, etc) don't handle pdfs as

    // expected.

    if ($.browser.mozilla) {

      if (Lightbox.imageArray[Lightbox.activeImage][0].indexOf(".pdf") != -1) {

        setTimeout(function () {

          document.getElementById("lightboxFrame").src = Lightbox.imageArray[Lightbox.activeImage][0];

        }, 1000);

      }

    }

  },

  // updateDetails()

  // Display caption, image number, and bottom nav.

  updateDetails: function() {

    $("#imageDataContainer").hide();

    var s = Drupal.settings.lightbox2;

    if (s.show_caption) {

      var caption = Lightbox.filterXSS(Lightbox.imageArray[Lightbox.activeImage][1]);

      if (!caption) caption = '';

      $('#caption').html(caption).css({'zIndex': '10500'}).show();

    }

    // If image is part of set display 'Image x of x'.

    var numberDisplay = null;

    if (s.image_count && Lightbox.total > 1) {

      var currentImage = Lightbox.activeImage + 1;

      if (!Lightbox.isLightframe && !Lightbox.isModal && !Lightbox.isVideo) {

        numberDisplay = s.image_count.replace(/\!current/, currentImage).replace(/\!total/, Lightbox.total);

      }

      else if (Lightbox.isVideo) {

        numberDisplay = s.video_count.replace(/\!current/, currentImage).replace(/\!total/, Lightbox.total);

      }

      else {

        numberDisplay = s.page_count.replace(/\!current/, currentImage).replace(/\!total/, Lightbox.total);

      }

      $('#numberDisplay').html(numberDisplay).css({'zIndex': '10500'}).show();

    }

    else {

      $('#numberDisplay').hide();

    }

    $("#imageDataContainer").hide().slideDown(Lightbox.slideDownSpeed, function() {

      $("#bottomNav").show();

    });

    if (Lightbox.rtl == 1) {

      $("#bottomNav").css({'float': 'left'});

    }

    Lightbox.updateNav();

  },

  // updateNav()

  // Display appropriate previous and next hover navigation.

  updateNav: function() {

    $('#hoverNav').css({'zIndex': '10500'}).show();

    var prevLink = '#prevLink';

    var nextLink = '#nextLink';

    // Slideshow is separated as we need to show play / pause button.

    if (Lightbox.isSlideshow) {

      if ((Lightbox.total > 1 && Lightbox.loopSlides) || Lightbox.activeImage !== 0) {

        $(prevLink).css({'zIndex': '10500'}).show().click(function() {

          if (Lightbox.pauseOnPrevClick) {

            Lightbox.togglePlayPause("lightshowPause", "lightshowPlay");

          }

          Lightbox.changeData(Lightbox.activeImage - 1); return false;

        });

      }

      else {

        $(prevLink).hide();

      }

      // If not last image in set, display next image button.

      if ((Lightbox.total > 1 && Lightbox.loopSlides) || Lightbox.activeImage != (Lightbox.total - 1)) {

        $(nextLink).css({'zIndex': '10500'}).show().click(function() {

          if (Lightbox.pauseOnNextClick) {

            Lightbox.togglePlayPause("lightshowPause", "lightshowPlay");

          }

          Lightbox.changeData(Lightbox.activeImage + 1); return false;

        });

      }

      // Safari browsers need to have hide() called again.

      else {

        $(nextLink).hide();

      }

    }

    // All other types of content.

    else {

      if ((Lightbox.isLightframe || Lightbox.isModal || Lightbox.isVideo) && !Lightbox.alternative_layout) {

        $('#frameHoverNav').css({'zIndex': '10500'}).show();

        $('#hoverNav').css({'zIndex': '10500'}).hide();

        prevLink = '#framePrevLink';

        nextLink = '#frameNextLink';

      }

      // If not first image in set, display prev image button.

      if ((Lightbox.total > 1 && Lightbox.loopItems) || Lightbox.activeImage !== 0) {

        // Unbind any other click handlers, otherwise this adds a new click handler

        // each time the arrow is clicked.

        $(prevLink).css({'zIndex': '10500'}).show().unbind().click(function() {

          Lightbox.changeData(Lightbox.activeImage - 1); return false;

        });

      }

      // Safari browsers need to have hide() called again.

      else {

        $(prevLink).hide();

      }

      // If not last image in set, display next image button.

      if ((Lightbox.total > 1 && Lightbox.loopItems) || Lightbox.activeImage != (Lightbox.total - 1)) {

        // Unbind any other click handlers, otherwise this adds a new click handler

        // each time the arrow is clicked.

        $(nextLink).css({'zIndex': '10500'}).show().unbind().click(function() {

          Lightbox.changeData(Lightbox.activeImage + 1); return false;

        });

      }

      // Safari browsers need to have hide() called again.

      else {

        $(nextLink).hide();

      }

    }

    // Don't enable keyboard shortcuts so forms will work.

    if (!Lightbox.isModal) {

      this.enableKeyboardNav();

    }

  },

  // enableKeyboardNav()

  enableKeyboardNav: function() {

    $(document).bind("keydown", this.keyboardAction);

  },

  // disableKeyboardNav()

  disableKeyboardNav: function() {

    $(document).unbind("keydown", this.keyboardAction);

  },

  // keyboardAction()

  keyboardAction: function(e) {

    if (e === null) { // IE.

      keycode = event.keyCode;

      escapeKey = 27;

    }

    else { // Mozilla.

      keycode = e.keyCode;

      escapeKey = e.DOM_VK_ESCAPE;

    }

    key = String.fromCharCode(keycode).toLowerCase();

    // Close lightbox.

    if (Lightbox.checkKey(Lightbox.keysClose, key, keycode)) {

      Lightbox.end('forceClose');

    }

    // Display previous image (p, <-).

    else if (Lightbox.checkKey(Lightbox.keysPrevious, key, keycode)) {

      if ((Lightbox.total > 1 && ((Lightbox.isSlideshow && Lightbox.loopSlides) || (!Lightbox.isSlideshow && Lightbox.loopItems))) || Lightbox.activeImage !== 0) {

        Lightbox.changeData(Lightbox.activeImage - 1);

      }

    }

    // Display next image (n, ->).

    else if (Lightbox.checkKey(Lightbox.keysNext, key, keycode)) {

      if ((Lightbox.total > 1 && ((Lightbox.isSlideshow && Lightbox.loopSlides) || (!Lightbox.isSlideshow && Lightbox.loopItems))) || Lightbox.activeImage != (Lightbox.total - 1)) {

        Lightbox.changeData(Lightbox.activeImage + 1);

      }

    }

    // Zoom in.

    else if (Lightbox.checkKey(Lightbox.keysZoom, key, keycode) && !Lightbox.disableResize && !Lightbox.disableZoom && !Lightbox.isSlideshow && !Lightbox.isLightframe) {

      if (Lightbox.isZoomedIn) {

        Lightbox.changeData(Lightbox.activeImage, false);

      }

      else if (!Lightbox.isZoomedIn) {

        Lightbox.changeData(Lightbox.activeImage, true);

      }

      return false;

    }

    // Toggle play / pause (space).

    else if (Lightbox.checkKey(Lightbox.keysPlayPause, key, keycode) && Lightbox.isSlideshow) {

      if (Lightbox.isPaused) {

        Lightbox.togglePlayPause("lightshowPlay", "lightshowPause");

      }

      else {

        Lightbox.togglePlayPause("lightshowPause", "lightshowPlay");

      }

      return false;

    }

  },

  preloadNeighborImages: function() {

    if ((Lightbox.total - 1) > Lightbox.activeImage) {

      preloadNextImage = new Image();

      preloadNextImage.src = Lightbox.imageArray[Lightbox.activeImage + 1][0];

    }

    if (Lightbox.activeImage > 0) {

      preloadPrevImage = new Image();

      preloadPrevImage.src = Lightbox.imageArray[Lightbox.activeImage - 1][0];

    }

  },

  end: function(caller) {

    var closeClick = (caller == 'slideshow' ? false : true);

    if (Lightbox.isSlideshow && Lightbox.isPaused && !closeClick) {

      return;

    }

    // To prevent double clicks on navigation links.

    if (Lightbox.inprogress === true && caller != 'forceClose') {

      return;

    }

    Lightbox.disableKeyboardNav();

    $('#lightbox').hide();

    $("#lightbox2-overlay").fadeOut();

    Lightbox.isPaused = true;

    Lightbox.inprogress = false;

    // Replaces calls to showSelectBoxes() and showFlash() in original

    // lightbox2.

    Lightbox.toggleSelectsFlash('visible');

    if (Lightbox.isSlideshow) {

      for (var i = 0; i < Lightbox.slideIdCount; i++) {

        window.clearTimeout(Lightbox.slideIdArray[i]);

      }

      $('#lightshowPause, #lightshowPlay').hide();

    }

    else if (Lightbox.isLightframe) {

      $('#frameContainer').empty().hide();

    }

    else if (Lightbox.isVideo || Lightbox.isModal) {

      if (!Lightbox.auto_modal) {

        $('#modalContainer').hide().html("");

      }

      Lightbox.auto_modal = false;

    }

  },

  // getPageScroll()

  // Returns array with x,y page scroll values.

  // Core code from - quirksmode.com.

  getPageScroll : function() {

    var xScroll, yScroll;

    if (self.pageYOffset || self.pageXOffset) {

      yScroll = self.pageYOffset;

      xScroll = self.pageXOffset;

    }

    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {  // Explorer 6 Strict.

      yScroll = document.documentElement.scrollTop;

      xScroll = document.documentElement.scrollLeft;

    }

    else if (document.body) {// All other Explorers.

      yScroll = document.body.scrollTop;

      xScroll = document.body.scrollLeft;

    }

    arrayPageScroll = [xScroll,yScroll];

    return arrayPageScroll;

  },

  // getPageSize()

  // Returns array with page width, height and window width, height.

  // Core code from - quirksmode.com.

  // Edit for Firefox by pHaez.

  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 than height of the viewport.

    if (yScroll < windowHeight) {

      pageHeight = windowHeight;

    }

    else {

      pageHeight = yScroll;

    }

    // For small pages with total width less than width of the viewport.

    if (xScroll < windowWidth) {

      pageWidth = xScroll;

    }

    else {

      pageWidth = windowWidth;

    }

    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);

    return arrayPageSize;

  },

  // pause(numberMillis)

  pause : function(ms) {

    var date = new Date();

    var curDate = null;

    do { curDate = new Date(); }

    while (curDate - date < ms);

  },

  // toggleSelectsFlash()

  // Hide / unhide select lists and flash objects as they appear above the

  // lightbox in some browsers.

  toggleSelectsFlash: function (state) {

    if (state == 'visible') {

      $("select.lightbox_hidden, embed.lightbox_hidden, object.lightbox_hidden").show();

    }

    else if (state == 'hide') {

      $("select:visible, embed:visible, object:visible").not('#lightboxAutoModal select, #lightboxAutoModal embed, #lightboxAutoModal object').addClass("lightbox_hidden");

      $("select.lightbox_hidden, embed.lightbox_hidden, object.lightbox_hidden").hide();

    }

  },

  // parseRel()

  parseRel: function (link) {

    var parts = [];

    parts["rel"] = parts["title"] = parts["group"] = parts["style"] = parts["flashvars"] = null;

    if (!$(link).attr('rel')) return parts;

    parts["rel"] = $(link).attr('rel').match(/\w+/)[0];

    if ($(link).attr('rel').match(/\[(.*)\]/)) {

      var info = $(link).attr('rel').match(/\[(.*?)\]/)[1].split('|');

      parts["group"] = info[0];