Note: This story was dynamically reformatted for online reading convenience.
 
 /*

   ColorBox v1.2.5 - a full featured, light-weight, customizable lightbox
based on jQuery 1.3

   (c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com

   Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php */ (function($){



   var open, element, settings, callback, maxWidth, maxHeight, loadedWidth,
loadedHeight, interfaceHeight, interfaceWidth, index, $related, ssTimeout,
$slideshow, $window, $close, $next, $prev, $current, $title, $modal, $wrap,
$loadingOverlay, $loadingGraphic, $overlay, $modalContent, $loaded,
$borderTopCenter, $borderMiddleLeft, $borderMiddleRight,
$borderBottomCenter;



   /* Helper Functions */

   //function for IE6 to set the background overlay

   function IE6Overlay(){

   $overlay.css({"position":"absolute", width:$window.width(),
height:$window.height(), top:$window.scrollTop(),
left:$window.scrollLeft()});

   }

   function slideshow(){

   var stop;

   function start(){

   $slideshow

   .text(settings.slideshowStop)

   .bind("cbox_complete", function(){

   ssTimeout = setTimeout($.fn.colorbox.next, settings.slideshowSpeed);

   })

   .bind("cbox_load", function(){

   clearTimeout(ssTimeout);

   }).one("click", function(){

   stop();

   $(this).removeClass('hover');

   });

   $modal.removeClass("cboxSlideshow_off").addClass("cboxSlideshow_on");

   }



   stop = function(){

   clearTimeout(ssTimeout);

   $slideshow

   .text(settings.slideshowStart)

   .unbind('cbox_complete cbox_load')

   .one("click", function(){

   start();

   ssTimeout = setTimeout($.fn.colorbox.next, settings.slideshowSpeed);

   $(this).removeClass('hover');

   });

   $modal.removeClass("cboxSlideshow_on").addClass("cboxSlideshow_off");

   };



   if(settings.slideshow && $related.length>1){

   if(settings.slideshowAuto){

   start();

   } else {

   stop();

   }

   }

   }

   function clearInline(){

   if($("#cboxInlineTemp").length > 0){

   $loaded.children().insertBefore("#cboxInlineTemp");

   $("#cboxInlineTemp").remove();

   }

   }

   function cbox_key(e) {

   if(e.keyCode == 37){

   e.preventDefault();

   $prev.click();

   } else if(e.keyCode == 39){

   e.preventDefault();

   $next.click();

   }

   }

   // Convert % values to pixels

   function setSize(size, dimension){

   dimension = dimension=='x' ?  document.documentElement.clientWidth :
document.documentElement.clientHeight;

   return (typeof size == 'string') ?  (size.match(/%/) ? 
(dimension/100)*parseInt(size, 10) : parseInt(size, 10)) : size;

   }

   function isImage(url){

   return settings.photo ?  true :
url.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(.*))?$/i);

   }

   /* Initializes ColorBox when the DOM has loaded */

   $(function(){

   $.fn.colorbox.init();

   });

   $.fn.colorbox = function(options, custom_callback) {



   if(this.length){

   this.each(function(){

   var data = $(this).data("colorbox") ?  $.extend({},

   $(this).data("colorbox"), options) : $.extend({},
$.fn.colorbox.settings, options);



   data.title = data.title ?  data.title : this.title;

   data.href = data.href ?  data.href : this.href;

   data.rel = data.rel ?  data.rel : this.rel;

   $(this).data("colorbox", data).addClass("cboxelement");

   });

   } else {

   $(this).data("colorbox", $.extend({}, $.fn.colorbox.settings, options));

   }



   $(this).unbind("click.colorbox").bind("click.colorbox", function (event)
{



   element = this;



   settings = $(this).data('colorbox');



   //remove the focus from the anchor to prevent accidentally calling

   //colorbox multiple times (by pressing the 'Enter' key

   //after colorbox has opened, but before the user has clicked on anything
else)

   this.blur();



   callback = custom_callback ?  custom_callback : false;



   if (settings.rel && settings.rel != 'nofollow') {

   $related = $('.cboxelement').filter(function(){

   return ($(this).data("colorbox").rel == settings.rel);

   });

   index = $related.index(this);

   } else {

   $related = $(this);

   index = 0;

   }

   if (!open) {

   $.event.trigger('cbox_open');

   $close.html(settings.close);
$overlay.css({"opacity": settings.opacity}).show();

   open = true;

   $.fn.colorbox.position(setSize(settings.initialWidth, 'x'),
setSize(settings.initialHeight, 'y'), 0);

   if ($.browser.msie && $.browser.version < 7) {

   $window.bind("resize scroll", IE6Overlay);

   }

   }

   slideshow();

   $.fn.colorbox.load();



   if(settings.overlayClose===true){
$overlay.css({"cursor":"pointer"}).click($.fn.colorbox.close);

   }

   event.preventDefault();

   });



   if(options && options.open){

   $(this).triggerHandler('click.colorbox');

   }



   return this;

   };

   $.fn.colorbox.element = function(){

   return element;

   };

   /*

   Initialize the modal: store common calculations, preload the interface
graphics, append the html.

   This preps colorbox for a speedy open when clicked, and lightens the
burdon on the browser by only

   having to run once, instead of each time colorbox is opened.

   */

   $.fn.colorbox.init = function(){



   $window = $(window);



   $('body').prepend(

   $overlay = $('<div id="cboxOverlay" />').hide(),

   $modal = $('<div id="colorbox" />')

   );



   $wrap = $('<div id="cboxWrapper" />').appendTo($modal).append(

   $('<div/>').append(

   $('<div id="cboxTopLeft"/>'),

   $borderTopCenter = $('<div id="cboxTopCenter"/>'),

   $('<div id="cboxTopRight"/>')

   ),

   $borderMiddleLeft = $('<div id="cboxMiddleLeft" />'),

   $modalContent = $('<div id="cboxContent" />'),

   $borderMiddleRight = $('<div id="cboxMiddleRight" />'),

   $('<div/>').append(

   $('<div id="cboxBottomLeft"/>'),

   $borderBottomCenter = $('<div id="cboxBottomCenter"/>'),

   $('<div id="cboxBottomRight"/>')

   )

   );


$wrap.find("[id]").css({'float':'left'});



   $modalContent.append(

   //loaded is filled with temporary HTML to allow the CSS backgrounds for
those elements to load before ColorBox is actually called.

   $loaded = $('<div id="cboxLoadedContent" style="width:0; height:0;"
/>'),

   $loadingOverlay = $('<div id="cboxLoadingOverlay" />'),

   $loadingGraphic = $('<div id="cboxLoadingGraphic" />'),

   $title = $('<div id="cboxTitle" />'),

   $current = $('<div id="cboxCurrent" />'),

   $slideshow = $('<div id="cboxSlideshow" />'),

   $next = $('<div id="cboxNext" />').click($.fn.colorbox.next),

   $prev = $('<div id="cboxPrevious" />').click($.fn.colorbox.prev),

   $close = $('<div id="cboxClose" />').click($.fn.colorbox.close)

   );



   $modalContent.children()

   .addClass("hover")

   .mouseover(function(){$(this).addClass("hover");})

   .mouseout(function(){$(this).removeClass("hover");})

   .hide();



   //precalculate sizes that will be needed multiple times.

   interfaceHeight =
$borderTopCenter.height()+$borderBottomCenter.height()+$modalContent.outerH
eight(true) - $modalContent.height();//Subtraction needed for IE6

   interfaceWidth =
$borderMiddleLeft.width()+$borderMiddleRight.width()+$modalContent.outerWid
th(true) - $modalContent.width();

   loadedHeight = $loaded.outerHeight(true);

   loadedWidth = $loaded.outerWidth(true);



  
$modal.css({"padding-bottom":interfaceHeight,"padding-right":interfaceWidth
}).hide();//the padding removes the need to do size conversions during the
animation step.



   //Setup button & key events.

   $().bind("keydown.cbox_close", function(e){

   if (e.keyCode == 27) {

   e.preventDefault();

   $close.click();

   }

   });



   $modalContent.children().removeClass("hover");

   };



   //navigates to the next page/image in a set.

   $.fn.colorbox.next = function(){

   index = index < $related.length-1 ?  index+1 : 0;

   $.fn.colorbox.load();

   };



   $.fn.colorbox.prev = function(){

   index = index > 0 ?  index-1 : $related.length-1;

   $.fn.colorbox.load();

   };



   $.fn.colorbox.position = function(mWidth, mHeight, speed,
loadedCallback){

   var winHeight = document.documentElement.clientHeight;

   var posTop = winHeight/2 - mHeight/2;

   var posLeft = document.documentElement.clientWidth/2 - mWidth/2;

   //keeps the box from expanding to an inaccessible area offscreen.

   if(mHeight > winHeight){posTop -=(mHeight - winHeight);}

   if(posTop < 0){posTop = 0;}

   if(posLeft < 0){posLeft = 0;}



   posTop+=$window.scrollTop();

   posLeft+=$window.scrollLeft();



   mWidth = mWidth - interfaceWidth;

   mHeight = mHeight - interfaceHeight;



   //this gives the wrapper plenty of breathing room so it's floated
contents can move around smoothly,

   //but it has to be shrank down around the size of div#colorbox when it's
done.  If not,

   //it can invoke an obscure IE bug when using iframes.

   $wrap[0].style.width = $wrap[0].style.height = "9999px";

   function modalDimensions(that){

   //loading overlay size has to be sure that IE6 uses the correct height.

   $borderTopCenter[0].style.width = $borderBottomCenter[0].style.width =
$modalContent[0].style.width = that.style.width;

   $loadingGraphic[0].style.height = $loadingOverlay[0].style.height =
$modalContent[0].style.height = $borderMiddleLeft[0].style.height =
$borderMiddleRight[0].style.height = that.style.height;

   }



   //setting the speed to 0 to reduce the delay between same-sized content.

   var animate_speed = ($modal.width()===mWidth && $modal.height() ===
mHeight) ?  0 : speed;

   $modal.dequeue().animate({height:mHeight, width:mWidth, top:posTop,
left:posLeft}, {duration: animate_speed,
complete: function(){

   modalDimensions(this);



   //shrink the wrapper down to exactly the size of colorbox to avoid a bug
in IE's iframe implementation.

   $wrap[0].style.width = (mWidth+interfaceWidth) + "px";

   $wrap[0].style.height = (mHeight+interfaceHeight) + "px";



   if (loadedCallback) {loadedCallback();}

   if ($.browser.msie && $.browser.version < 7) {IE6Overlay();}

   },
step: function(){

   modalDimensions(this);

   }

   });

   };



   $.fn.colorbox.dimensions = function(object){

   if(!open){ return; }



   $window.unbind('resize.cbox_resize');



   var speed = settings.transition=="none" ?  0 : settings.speed;

   $loaded.remove();

   $loaded = $(object);



   function getWidth(){

   if(settings.width){

   return maxWidth;

   } else {

   return maxWidth && maxWidth < $loaded.width() ?  maxWidth :
$loaded.width();

   }

   }

   function getHeight(){

   if(settings.height){

   return maxHeight;

   } else {

   return maxHeight && maxHeight < $loaded.height() ?  maxHeight :
$loaded.height();

   }

   }



   $loaded.hide().appendTo('body')
.attr({id:'cboxLoadedContent'})
.css({width:getWidth()})
.css({height:getHeight()})//sets the height independently from the width
in case the new width influences the value of height.

   .prependTo($modalContent);



   if ($.browser.msie && $.browser.version < 7) {

   $('select').not($('#colorbox select')).css({'visibility':'hidden'});

   }



   if($('#cboxPhoto').length > 0 && settings.height){

   var topMargin = ($loaded.height() -
parseInt($('#cboxPhoto')[0].style.height, 10))/2;
$('#cboxPhoto').css({marginTop:(topMargin > 0?topMargin:0)});

   }



   function setPosition(s){

   var mWidth = $loaded.width()+loadedWidth+interfaceWidth;

   var mHeight = $loaded.height()+loadedHeight+interfaceHeight;

   $.fn.colorbox.position(mWidth, mHeight, s, function(){

   if(!open){ return; }



   if($.browser.msie){

   //This fadeIn helps the bicubic resampling to kick-in.

   if($('#cboxPhoto').length > 0 ){$loaded.fadeIn(100);}

   //IE adds a filter when ColorBox fades in and out that can cause
problems if the loaded content contains transparent pngs.

   $modal.css('filter','');

   }



   $modalContent.children().show();



   //Waited until the iframe is added to the DOM & it is visible before
setting the src.

   //This increases compatability with pages using DOM dependent
JavaScript.

   $('#cboxIframe').attr('src', settings.href);



   $loadingOverlay.hide();

   $loadingGraphic.hide();

   $slideshow.hide();



   if($related.length>1){

   $current.html(settings.current.replace(/\{current\}/,
index+1).replace(/\{total\}/, $related.length));

   $next.html(settings.next);

   $prev.html(settings.previous);



   $().unbind('keydown', cbox_key).one('keydown', cbox_key);



   if(settings.slideshow){

   $slideshow.show();

   }

   } else {

   $current.add($next).add($prev).hide();

   }

   $title.html(settings.title);



   $.event.trigger('cbox_complete');



   if(callback){

   callback.call(element);

   }



   if (settings.transition === 'fade'){

   $modal.fadeTo(speed, 1, function(){

   if($.browser.msie){$modal.css('filter','');}

   });

   }



   $window.bind('resize.cbox_resize', function(){

   $.fn.colorbox.position(mWidth, mHeight, 0);

   });

   });

   }

   if (settings.transition == 'fade') {

   $modal.fadeTo(speed, 0, function(){setPosition(0);});

   } else {

   setPosition(speed);

   }



   if(settings.preloading && $related.length>1){

   var previous = index > 0 ?  $related[index-1] :
$related[$related.length-1];

   var next = index < $related.length-1 ?  $related[index+1] : $related[0];

   if(isImage($(next).data('colorbox').href)){

   $('<img />').attr('src', next);

   }

   if(isImage($(previous).data('colorbox').href)){

   $('<img />').attr('src', previous);

   }

   }

   };



   $.fn.colorbox.load = function(){



   element = $related[index];



   settings = $(element).data('colorbox');



   $.event.trigger('cbox_load');



   $loadingOverlay.show();

   $loadingGraphic.show();

   $close.show();

   clearInline();//puts inline elements back if they are being used



   // Evaluate the height based on the optional height and width settings.

   var height = settings.height ?  setSize(settings.height, 'y') -
loadedHeight - interfaceHeight : false;

   var width = settings.width ?  setSize(settings.width, 'x') - loadedWidth
- interfaceWidth : false;



   //Re-evaluate the maximum dimensions based on the optional maxheight and
maxwidth.

   if(settings.maxHeight){

   maxHeight = settings.maxHeight ?  setSize(settings.maxHeight, 'y') -
loadedHeight - interfaceHeight : false;

   height = height && height < maxHeight ?  height : maxHeight;

   }

   if(settings.maxWidth){

   maxWidth = settings.maxWidth ?  setSize(settings.maxWidth, 'x') -
loadedWidth - interfaceWidth : false;

   width = width && width < maxWidth ?  width : maxWidth;

   }



   maxHeight = height;

   maxWidth = width;



   var href = settings.href;



   if (settings.inline) {

   $('<div id="cboxInlineTemp" />').hide().insertBefore($(href)[0]);

   $.fn.colorbox.dimensions($(href).wrapAll('<div/>').parent());

   } else if (settings.iframe) {

   $.fn.colorbox.dimensions(

   $("<div><iframe id='cboxIframe' name='iframe_"+new Date().getTime()+"'
frameborder=0 /></div>")

   );//timestamp to prevent caching.

   } else if (isImage(href)){

   var loadingElement = new Image();

   loadingElement.onload = function(){

   loadingElement.onload = null;



   if((maxHeight || maxWidth) && settings.resize){

   var width = this.width;

   var height = this.height;

   var percent = 0;

   var that = this;



   var setResize = function(){

   height += height * percent;

   width += width * percent;

   that.height = height;

   that.width = width;

   };

   if( maxWidth && width > maxWidth ){

   percent = (maxWidth - width) / width;

   setResize();

   }

   if( maxHeight && height > maxHeight ){

   percent = (maxHeight - height) / height;

   setResize();

   }

   }



   $.fn.colorbox.dimensions($("<div />").css({width:this.width,
height:this.height}).append($(this).css({width:this.width,
height:this.height, display:"block", margin:"auto", border:0}).attr('id',
'cboxPhoto')));

   if($related.length > 1){
$(this).css({cursor:'pointer'}).click($.fn.colorbox.next);

   }

   if($.browser.msie && $.browser.version == 7){

   this.style.msInterpolationMode='bicubic';

   }

   };

   loadingElement.src = href;

   } else {

   $('<div />').load(href, function(data, textStatus){

   if(textStatus == "success"){

   $.fn.colorbox.dimensions($(this));

   } else {

   $.fn.colorbox.dimensions($("<p>Request unsuccessful.</p>"));

   }

   });

   }

   };

   //public function for closing colorbox.  To use this within an iframe
use the following format: parent.$.fn.colorbox.close();

   $.fn.colorbox.close = function(){

   open = false;

   clearTimeout(ssTimeout);

   $window.unbind('resize.cbox_resize');

   $slideshow.unbind('cbox_complete cbox_load click');

   clearInline();

   $overlay.css({cursor:'auto'}).fadeOut('fast').unbind('click',
$.fn.colorbox.close);

   $().unbind('keydown', cbox_key);



   if ($.browser.msie && $.browser.version < 7) {
$('select').css({'visibility':'inherit'});

   $window.unbind('resize scroll', IE6Overlay);

   }



   $modalContent.children().hide();



   $modal

   .stop(true, false)

   .removeClass()

   .fadeOut('fast', function(){

   element.focus();

   $loaded.remove();
$modal.css({'opacity':1});

   $.event.trigger('cbox_closed');

   });

   };

   /*

   ColorBox Default Settings.



   The colorbox() function takes one argument, an object of key/value
pairs, that are used to initialize the modal.



   Please do not change these settings here, instead overwrite these
settings when attaching the colorbox() event to your anchors.

   Example (Global) : $.fn.colorbox.settings.transition = "fade"; //changes
the transition to fade for all colorBox() events proceeding it's
declaration.

   Example (Specific) :
$("a[href='http://www.google.com']").colorbox({width:"90%", height:"450px",
iframe:true});



   See http://colorpowered.com/colorbox for details.

   */

   $.fn.colorbox.settings = {

   transition : "elastic",

   speed : 350,

   width : false,

   height : false,

   initialWidth : "400",

   initialHeight : "400",

   maxWidth : false,

   maxHeight : false,

   resize : true,

   inline : false,

   iframe : false,

   photo : false,

   href : false,

   title : false,

   rel : false,

   opacity : 0.9,

   preloading : true,

   current : "image {current} of {total}",

   previous : "previous",

   next : "next",

   close : "close",

   open : false,

   overlayClose : true,
slideshow:false,
slideshowAuto:true,
slideshowSpeed: 2500,
slideshowStart: "start slideshow",
slideshowStop: "stop slideshow"

   }; })(jQuery);