move old site

colorbox/README

@@ -0,0 +1,207 @@
+DEMONSTRATION AND INSTRUCTIONS/API:
+----------------------------------------------------------------------------------------------------------
+http://colorpowered.com/colorbox/
+
+
+HELP:
+----------------------------------------------------------------------------------------------------------
+Visit the ColorBox mailing list if you have any questions or problems.
+http://groups.google.com/group/colorbox/topics
+
+
+RELEASE NOTES:
+----------------------------------------------------------------------------------------------------------
+
+Version 1.2.6 - July 15 2009
+Files Changed: jquery.colorbox.js/jquery.colorbox-min.js
+* Fixed a bug with fixed width/height images in Opera 9.64.
+* Fixed a bug with trying to set a value for rel during a direct call to ColorBox.
+  Example: $.fn.colorbox({rel:'foo', open:true});
+* Changed how href/rel/title settings are determined to avoid users having to manually update ColorBox
+  settings if they use JavaScript to update any of those attributes, after ColorBox has been defined.
+* Fixed a FF3 bug where the back button was disabled after closing an iframe.
+
+
+Version 1.2.5 - June 23 2009
+Files Changed: jquery.colorbox.js/jquery.colorbox-min.js
+* Changed the point at which iframe srcs are set (to eliminate the need to refresh the iframe once it has
+  been added to the DOM).
+* Removed unnecessary return values for a very slight code reduction.
+
+
+Version 1.2.4 - June 9 2009
+Files Changed: jquery.colorbox.js, jquery.colorbox-min.js
+* Fixed an issue where ColorBox may not close completely if it is closed during a transition animation.
+* Minor code reduction.
+
+
+Version 1.2.3 - June 4 2009
+* Fixed a png transparency stacking issue in IE.
+* More accurate Ajax auto-sizing if the user was depending on the #cboxLoadedContent ID for CSS styling.
+* Added a public function for returning the current html element that ColorBox is associated with.
+  Example use: var that = $.fn.colorbox.element();
+* Added bicubic scaling for resized images in the original IE7.
+* Removed the IE6 stylesheet and png files from Example 3.  It now uses the same png file for the controls
+  that the rest of the browsers use (an alpha transparency PNG8).  This example now only has 2 graphics
+  files and 1 stylesheet.
+
+
+Version 1.2.2 - May 28 2009
+* Fixed an issue with the 'resize' option.
+
+
+Version 1.2.1 - May 28 2009
+* Note: If you are upgrading, update your jquery.colorbox.js and colorbox.css files.
+* Added photo resizing.
+* Added a maximum width and maximum height. Example: {height:800, maxHeight:'100%'}, would allow the box
+  to be a maximum potential height of 800px, instead of a fixed height of 800px.  With maxHeight of 100%
+  the height of ColorBox cannot exceed the height of the browser window.
+* Added 'rel' setting to add the ability to set an alternative rel for any ColorBox call.  This allows the
+  user to group any combination of elements together for a gallery, or to override an existing rel.
+  attribute so those element are not grouped together, without having to alter their rel in the HTML.
+* Added a 'photo' setting to force ColorBox to display a link as a photo.  Use this when automatic photo detection
+  fails (such as using a url like 'photo.php' instead of 'photo.jpg', 'photo.jpg#1', or 'photo.jpg?pic=1')
+* Removed the need to ever create disposable elements to call colorbox on.  ColorBox can now be called
+  directly, without being associated with any existing element, by using the following format:
+  $.fn.colorbox({open:true, href:'yourLink.xxx'});
+* ColorBox settings are now persistent and unique for each element.  This allows for extremely flexible
+  options for individual elements.  You could use this to create a gallery in which each page in the gallery
+  has different settings.  One could be a photo with a fade transition, next could be an inline element
+  with an elastic transition with a set width and height, etc.
+* For user callbacks, 'this' now refers to the element colorbox was opened from.
+* Fixed a minor grouping issue with IE6, when transition type is set to 'none'.
+* Added an Adobe Illustrator file that contains the borders and buttons used in the various examples.
+
+
+Version 1.2 - May 13 2009
+* Note: If you are upgrading from a previous version of ColorBox, see the UPGRADE file.
+
+* Added a slideshow feature.
+* Added re-positioning on browser resize.  If the browser is resized, ColorBox will recenter itself onscreen.
+* Added hooks for key events: cbox_open, cbox_load, cbox_complete, cbox_closed.
+  Example of using the hooks to build a primitive sideshow:
+  $().bind('cbox_complete', function(){
+    setTimeout($.fn.colorbox.next, 1500);
+  });
+* Fixed an IE transparency-stacking problem, where transparent PNGs would show through to the background
+  overlay.
+* Fixed an IE iframe issue where the ifame might shift up and to the left under certain circumstances.
+* Fixed an IE6 bug where the loading overlay was not at full height.
+* Removed the delay in switching between same-sized gallery content when using transitions.
+* Changed how iframes are loaded to make it more compatible with iframed pages that use DOM dependent
+  JavaScript.
+* Changed how the JS is structured to be better organized and increase compression.  Increased documentation.
+* Changed CSS :hover states to a .hover class.  This sidesteps a minor IE8 bug with css hover states and
+  allows easier access to hover state user styles from the JavaScript.
+* Changed: elements added to the DOM have new ID's.  The naming is more consistent and less likely to cause
+  conflicts with existing website stylesheets.  All stylesheets have been updated.
+* Changed the behavior for prev/next links so that ColorBox does not get hung up on broken links.  A visitor
+  can now skip through broken or long-loading links by clicking prev/next buttons.
+* Changed the naming of variables in the parameter map to be more concise and intuitive.
+* Removed colorbox.css.  Combined the colorbox.css styles with jquery.colorbox.js:
+  the css file was not large enough to warrant being a separate file.
+
+
+Version 1.1.6 - April 28 2009
+* Prevented the default action of the next & previous anchors and the left and right keys for gallery mode.
+* Fixed a bug where the title element was being added back to the DOM when closing ColorBox while using
+  inline content.
+* Fixed a bug where IE7 would crash for example 2.
+* Smaller filesize: removed a small amount of unused code and rewrote the HTML injection with less syntax.
+* Added a public method for closing ColorBox: $.fn.colorbox.close().  This will allow iframe users to
+  add an event to close ColorBox without having to create an additional function.
+
+
+Version 1.1.5 - April 11 2009
+* Fixed minor issues with exiting ColorBox.
+ 
+
+Version 1.1.4 - April 08 2009
+* Fixed a bug in the fade transition where ColorBox not close completely if instructed to close during the
+  fade-in portion of the transition.
+
+
+Version 1.1.3 - April 06 2009
+* Fixed an IE6&7 issue with using ColorBox to display animated GIFs.
+
+
+Version 1.1.2 - April 05 2009
+* Added ability to change content when ColorBox is already open.
+* Added vertical photo centering now works for all browsers (this feature previously excluded IE6&7).
+* Added namespacing to the esc-key keydown event for people who want to disable it: "keydown.colorClose"
+* Added 'title' setting to add the ability to set an alternative title for any ColorBox call.
+* Fixed rollover navigation issue with IE8. (Added JS-based rollover state due to a browser-bug.)
+* Fixed an overflow issue for when the fixed width/height is smaller than the size of a photo.
+* Fixed a bug in the fade transition where the border would still come up if ColorBox was
+  closed mid-transition.
+* Switch from JSMin to Yui Compressor for minification.  Minified code now under 7KB.
+
+
+Version 1.1.1 - March 31 2009
+* More robust image detection regex.  Now detects image file types with url fragments and/or query strings.
+* Added 'nofollow' exception to rel grouping.
+* Changed how images are loaded into the DOM to prevent premature size calculation by ColorBox.
+* Added timestamp to iframe name to prevent caching - this was a problem in some browsers if the user had
+  multiple iframes and the visitor left the page and came back, or if they refreshed the page.
+
+
+Version 1.1.0 - March 21 2009
+  Major Changes:
+* Animation is now much smoother and less resource intensive.
+* Added support for % sizing.
+* Callback option added.
+* Inline content now preserves JavaScript events, and changes made while ColorBox is open are also preserved.
+* Added 'href' setting to add the ability to set an alternative href for any anchor, or to assign the
+  ColorBox event to non-anchors. 
+  Example: $('button').colorbox({'href':'process.php'})
+  Example: $('a[href='http://msn.com']).colorbox({'href':'http://google.com', iframe:true});
+ 
+  Minor Changes:
+* Photos are now horizontally centered if they are smaller than the lightbox size.  Also vertically centered
+  for browsers newer than IE7.
+* Buttons in the examples are now included in the 'protected zone'.  The lightbox will never expand it's
+  borders or buttons beyond an accessible area of the screen.
+* Keypress events don't queue up by holding down the arrow keys.
+* Added option to close ColorBox by clicking on the background overlay.
+* Added 'none' transition setting.
+* Changed 'contentIframe' and 'contentInline' to 'inline' and 'iframe'.  Removed 'contentAjax' because it
+  is automatically assumed for non-image file types.
+* Changed 'contentWidth' and 'contentHeight' to 'fixedWidth' and 'fixedHeight'.  These sizes now reflect
+  the total size of the lightbox, not just the inner content.  This is so users can accurately anticipate
+  % sizes without fear of creating scrollbars.
+* Clicking on a photo will now switch to the next photo in a set.
+* Loading.gif is more stable in it's position.
+* Added a minified version.
+* Code passes JSLint.
+
+
+Version 1.0.5 - March 11 2009
+* Redo: Fixed a bug where IE would cut off the bottom portion of a photo, if the photo was larger than
+  the document dimensions.
+
+
+Version 1.0.4 - March 10 2009
+* Added an option to allow users to automatically open the lightbox. 
+  Example usage: $(".colorbox").colorbox({open:true});
+* Fixed a bug where IE would cut off the bottom portion of a photo,
+  if the photo was larger than the document dimensions.
+
+
+Version 1.0.3 - March 09 2009
+* Fixed vertical centering for Safari 3.0.x.
+
+
+Version 1.0.2 - March 06 2009
+* Corrected a typo.
+* Changed the content-type check so that it does not assume all links to photos should actually
+  display photos.  This allows for Ajax/inline/and iframe calls on anchors linking to picture file types.
+
+
+Version 1.0.1 - March 05 2009
+* Fixed keydown events (esc, left arrow, right arrow) for Webkit browsers.
+
+
+Version 1.0 - March 03 2009
+* First release
+
+

colorbox/colorbox/jquery.colorbox.js

@@ -0,0 +1,562 @@
+/*
+	ColorBox v1.2.6 - 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);
+				$(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 = $(element).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)
+			element.blur();
+			
+			callback = custom_callback ? custom_callback : false;
+			
+			var rel = settings.rel ? settings.rel : element.rel;
+			
+			if (rel && rel != 'nofollow') {
+				$related = $('.cboxelement').filter(function(){
+					var relRelated = $(this).data("colorbox").rel ? $(this).data("colorbox").rel : this.rel;
+					return (relRelated == rel);
+				});
+				index = $related.index(element);
+				
+				if(index<0){ //this checks direct calls to colorbox
+					$related = $related.add(element);
+					index = $related.length - 1;
+				}
+			
+			} else {
+				$related = $(element);
+				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.outerHeight(true) - $modalContent.height();//Subtraction needed for IE6
+		interfaceWidth = $borderMiddleLeft.width()+$borderMiddleRight.width()+$modalContent.outerWidth(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);
+		
+		var width;
+		var height;
+		
+		function getWidth(){
+			if(settings.width){
+				width = maxWidth;
+			} else {
+				width = maxWidth && maxWidth < $loaded.width() ? maxWidth : $loaded.width();
+			}
+			return width;
+		}
+		function getHeight(){
+			if(settings.height){
+				height = maxHeight;
+			} else {
+				height = maxHeight && maxHeight < $loaded.height() ? maxHeight : $loaded.height();
+			}
+			return 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 = (height - parseInt($('#cboxPhoto')[0].style.height, 10))/2;
+			$('#cboxPhoto').css({marginTop:(topMargin > 0?topMargin:0)});
+		}
+		
+		function setPosition(s){
+			var mWidth = width+loadedWidth+interfaceWidth;
+			var mHeight = 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').after("<iframe name='iframe_"+new Date().getTime()+"' frameborder=0 src='"+(settings.href ? settings.href : element.href)+"' />").remove();
+				
+				$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 ? settings.title : element.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 prev = index > 0 ? $related[index-1] : $related[$related.length-1];
+			var next = index < $related.length-1 ? $related[index+1] : $related[0];
+			
+			var nextSrc = $(next).data('colorbox').href ? $(next).data('colorbox').href : next.href;
+			var prevSrc = $(prev).data('colorbox').href ? $(prev).data('colorbox').href : prev.href;
+			
+			if(isImage(nextSrc)){
+				$('<img />').attr('src', nextSrc);
+			}
+			if(isImage(prevSrc)){
+				$('<img />').attr('src', prevSrc);
+			}
+		}
+	};
+	
+	$.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 ? settings.href : element.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><div id='cboxIframe' /></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);
+

colorbox/content/ajax.html

@@ -0,0 +1,8 @@
+<div style="background:url(../content/homer.jpg) right center no-repeat #ececec; height:135px; width:280px; padding:30px 10px;">
+<strong>Homer</strong><br>
+<em>\noun\</em><br>
+<strong>1.</strong> American bonehead<br>
+<strong>2. Pull a Homer-</strong><br>
+to succeed despite<br>
+idiocy
+<div>

colorbox/content/flash.html

@@ -0,0 +1 @@
+<object width="504" height="412"><param name="allowfullscreen" value="true" /><param name="wmode" value="opaque" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2285902&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=2285902&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" wmode="opaque" allowscriptaccess="always" width="504" height="412"></embed></object>

colorbox/example1/colorbox-ie.css

@@ -0,0 +1,15 @@
+/*
+	The following fixes png-transparency for IE6.  
+	It is also necessary for png-transparency to cooperate with the fade transition in IE7 & IE8
+	
+	Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.  
+	Colorbox preloads navigation hover classes to account for this.
+*/
+#cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopLeft.png, sizingMethod='scale');}
+#cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopCenter.png, sizingMethod='scale');}
+#cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopRight.png, sizingMethod='scale');}
+#cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomLeft.png, sizingMethod='scale');}
+#cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomCenter.png, sizingMethod='scale');}
+#cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomRight.png, sizingMethod='scale');}
+#cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderMiddleLeft.png, sizingMethod='scale');}
+#cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderMiddleRight.png, sizingMethod='scale');}

colorbox/example1/colorbox.css

@@ -0,0 +1,43 @@
+/*
+    ColorBox Core Style
+    The following rules are the styles that are consistant between all ColorBox themes
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative; overflow:visible;}
+#cboxLoadedContent{overflow:auto;}
+#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+
+/* 
+    ColorBox example user style
+    The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 
+    in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
+*/
+#cboxOverlay{background:url(images/overlay.png) 0 0 repeat;}
+
+#colorbox{}
+	#cboxTopLeft{width:21px; height:21px; background:url(images/borderTopLeft.png) 0 0 no-repeat;}
+	#cboxTopCenter{height:21px; background:url(images/borderTopCenter.png) 0 0 repeat-x;}
+	#cboxTopRight{width:21px; height:21px; background:url(images/borderTopRight.png) 0 0 no-repeat;}
+	#cboxBottomLeft{width:21px; height:21px; background:url(images/borderBottomLeft.png) 0 0 no-repeat;}
+	#cboxBottomCenter{height:21px; background:url(images/borderBottomCenter.png) 0 0 repeat-x;}
+	#cboxBottomRight{width:21px; height:21px; background:url(images/borderBottomRight.png) 0 0 no-repeat;}
+	#cboxMiddleLeft{width:21px; background:url(images/borderMiddleLeft.png) 0 0 repeat-y;}
+	#cboxMiddleRight{width:21px; background:url(images/borderMiddleRight.png) 0 0 repeat-y;}
+	#cboxContent{background:#fff;}
+		#cboxLoadedContent{margin-bottom:28px;}
+                #cboxTitle{position:absolute; bottom:3px; left:0; text-align:center; width:100%; color:#949494;}
+                #cboxCurrent{position:absolute; bottom:3px; left:58px; color:#949494;}
+                #cboxSlideshow{position:absolute; bottom:3px; right:30px; color:#0092ef;}
+                #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(images/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
+                #cboxPrevious.hover{background-position:-25px -25px;}
+                #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) 0px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
+                #cboxNext.hover{background-position:0px -25px;}
+		#cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
+                #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
+		#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
+		#cboxClose.hover{background-position:-50px -25px;}

colorbox/example1/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<title>ColorBox Examples</title>
+		<style type="text/css">
+			body{font:12px/1.5 Verdana, Arial, san-serrif;}
+			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
+			h2{font-size:13px;}
+			.hidden{display:none;}
+		</style>
+		<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
+		<!--[if IE]>
+		<link type="text/css" media="screen" rel="stylesheet" href="colorbox-ie.css" title="example" />
+		<![endif]-->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+		<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
+		<script type="text/javascript">
+			$(document).ready(function(){
+				//Examples of how to assign the ColorBox event to elements.
+				$("a[rel='jack']").colorbox({transition:"fade"});
+				$("a[rel='dogs']").colorbox({transition:"elastic"});
+				$("a[rel='river']").colorbox({transition:"none", width:"75%", height:"75%"});
+				$(".slideshow").colorbox({slideshow:true});
+				$("a.single").colorbox({}, function(){
+					alert('Howdy, this is an example callback.');
+				});
+				$("a[title='Homer Defined']").colorbox();
+				$(".flash").colorbox({href:"../content/flash.html"});
+				$("a[href='http://google.com']").colorbox({width:"80%", height:"80%", iframe:true});
+				
+				//Example of preserving a JavaScript event for inline calls.
+				$("#click").click(function(){ 
+					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
+				});
+				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
+			});
+		</script>
+	</head>
+	<body>
+		<h1>ColorBox Demonstration</h1>
+		<h2>fade transition</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="jack" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="jack" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="jack" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+		
+		<h2>elastic transition + changed default photo numbering</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="dogs" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="dogs" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="dogs" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>no transition + fixed width and height (75% of screen size)</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="river"  class='ohoopee' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>slideshow</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="ohoopee"  class='slideshow' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>Single photo with callback example</h2>
+		<p><a class='single' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Single Photo</a></p>
+
+		<h2>Other Content Types</h2>
+		<p><a href="http://google.com">Outside webpage (IFrame)</a></p>
+		<p><a title="Homer Defined" href="../content/ajax.html">Outside HTML (Ajax)</a></p>
+		<p><a id="inline" href="#">Inline HTML</a></p>
+		<p><a class="flash" href="http://www.vimeo.com/2285902" title="Royksopp: Remind Me">Flash / Video</a></p>
+
+		<!-- This contains the hidden content for inline calls -->
+		<div class='hidden'>
+			<div id='inline_example1' style='padding:10px; background:#fff;'>
+			<p><strong>This content comes from a hidden element on this page.</strong></p>
+			<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
+			<a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
+			
+			<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
+			<p>Updating Content Example:<br />
+			<a class="flash" href="#">Click here to load new content</a></p>
+			</div>
+		</div>
+	</body>
+</html>

colorbox/example2/colorbox.css

@@ -0,0 +1,44 @@
+/*
+    ColorBox Core Style
+    The following rules are the styles that are consistant between all ColorBox themes
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative; overflow:visible;}
+#cboxLoadedContent{overflow:auto;}
+#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+
+/* 
+	ColorBox example user style
+	These rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 
+	in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
+*/
+#cboxOverlay{background:#fff;}
+
+#colorbox{}
+	#cboxContent{margin-top:32px;}
+		#cboxLoadedContent{background:#000; padding:1px;}
+                #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
+                #cboxLoadingOverlay{background:#000;}
+                #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
+                #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
+                
+                #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(images/controls.png) 0 0 no-repeat;}
+
+                #cboxPrevious{background-position:0px 0px; right:44px;}
+                #cboxPrevious.hover{background-position:0px -25px;}
+                #cboxNext{background-position:-25px 0px; right:22px;}
+                #cboxNext.hover{background-position:-25px -25px;}
+		#cboxClose{background-position:-50px 0px; right:0;}
+		#cboxClose.hover{background-position:-50px -25px;}
+
+                .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
+
+                .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
+                .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
+                .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
+                .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}

colorbox/example2/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<title>ColorBox Examples</title>
+		<style type="text/css">
+			body{font:12px/1.5 Verdana, Arial, san-serrif;}
+			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
+			h2{font-size:13px;}
+			.hidden{display:none;}
+		</style>
+		<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
+		<!--
+		This example has no IE-Only Stylesheet because the theme uses no transparent png files.
+		-->
+		
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+		<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
+		<script type="text/javascript">
+			$(document).ready(function(){
+				//Examples of how to assign the ColorBox event to elements.
+				$("a[rel='jack']").colorbox({transition:"fade"});
+				$("a[rel='dogs']").colorbox({transition:"elastic"});
+				$("a[rel='river']").colorbox({transition:"none", width:"75%", height:"75%"});
+				$(".slideshow").colorbox({slideshow:true});
+				$("a.single").colorbox({}, function(){
+					alert('Howdy, this is an example callback.');
+				});
+				$("a[title='Homer Defined']").colorbox();
+				$(".flash").colorbox({href:"../content/flash.html"});
+				$("a[href='http://google.com']").colorbox({width:"80%", height:"80%", iframe:true});
+				
+				//Example of preserving a JavaScript event for inline calls.
+				$("#click").click(function(){ 
+					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
+				});
+				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
+			});
+		</script>
+	</head>
+	<body>
+		<h1>ColorBox Examples</h1>
+		
+		<h2>fade transition</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="jack" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="jack" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="jack" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+		
+		<h2>elastic transition + changed default photo numbering</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="dogs" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="dogs" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="dogs" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>no transition + fixed width and height (75% of screen size)</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="river"  class='ohoopee' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>slideshow</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="ohoopee"  class='slideshow' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>Single photo with callback example</h2>
+		<p><a class='single' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Single Photo</a></p>
+
+		<h2>Other Content Types</h2>
+		<p><a href="http://google.com">Outside webpage (IFrame)</a></p>
+		<p><a title="Homer Defined" href="../content/ajax.html">Outside HTML (Ajax)</a></p>
+		<p><a id="inline" href="#">Inline HTML</a></p>
+		<p><a class="flash" href="http://www.vimeo.com/2285902" title="Royksopp: Remind Me">Flash / Video</a></p>
+
+		<!-- This contains the hidden content for inline calls -->
+		<div class='hidden'>
+			<div id='inline_example1' style='padding:10px; background:#fff;'>
+			<p><strong>This content comes from a hidden element on this page.</strong></p>
+			<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
+			<a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
+			
+			<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
+			<p>Updating Content Example:<br />
+			<a class="flash" href="#">Click here to load new content</a></p>
+			</div>
+		</div>
+	</body>
+</html>

colorbox/example3/colorbox.css

@@ -0,0 +1,35 @@
+/*
+    ColorBox Core Style
+    The following rules are the styles that are consistant between all ColorBox themes
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative; overflow:visible;}
+#cboxLoadedContent{overflow:auto;}
+#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+
+/* 
+	ColorBox example user style
+	These rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 
+	in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
+*/
+#cboxOverlay{background:#000;}
+
+#colorbox{}
+	#cboxContent{background:#000; margin-top:20px;}
+		#cboxLoadedContent{background:#000; padding:5px;}
+                #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
+                #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
+                #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
+                #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-41px; background:url(images/controls.png) top left no-repeat; width:38px; height:81px; text-indent:-9999px;}
+                #cboxPrevious.hover{background-position:bottom left;}
+                #cboxNext{position:absolute; top:50%; right:5px; margin-top:-41px; background:url(images/controls.png) top right no-repeat; width:38px; height:81px; text-indent:-9999px;}
+                #cboxNext.hover{background-position:bottom right;}
+                #cboxLoadingOverlay{background:#000;}
+		#cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
+		#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) top center no-repeat; width:47px; height:24px; text-indent:-9999px;}
+		#cboxClose.hover{background-position:bottom center;}

colorbox/example3/index.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<title>ColorBox Examples</title>
+		<style type="text/css">
+			body{font:12px/1.5 Verdana, Arial, san-serrif;}
+			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
+			h2{font-size:13px;}
+			.hidden{display:none;}
+		</style>
+		<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+		<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
+		<script type="text/javascript">
+			$(document).ready(function(){
+				//Examples of how to assign the ColorBox event to elements.
+				$("a[rel='jack']").colorbox({transition:"fade"});
+				$("a[rel='dogs']").colorbox({transition:"elastic"});
+				$("a[rel='river']").colorbox({transition:"none", width:"75%", height:"75%"});
+				$(".slideshow").colorbox({slideshow:true});
+				$("a.single").colorbox({}, function(){
+					alert('Howdy, this is an example callback.');
+				});
+				$("a[title='Homer Defined']").colorbox();
+				$(".flash").colorbox({href:"../content/flash.html"});
+				$("a[href='http://google.com']").colorbox({width:"80%", height:"80%", iframe:true});
+				
+				//Example of preserving a JavaScript event for inline calls.
+				$("#click").click(function(){ 
+					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
+				});
+				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
+			});
+		</script>
+	</head>
+	<body>
+		<h1>ColorBox Examples</h1>
+		<h2>fade transition</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="jack" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="jack" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="jack" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+		
+		<h2>elastic transition + changed default photo numbering</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="dogs" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="dogs" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="dogs" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>no transition + fixed width and height (75% of screen size)</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="river"  class='ohoopee' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>slideshow</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="ohoopee"  class='slideshow' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>Single photo with callback example</h2>
+		<p><a class='single' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Single Photo</a></p>
+
+		<h2>Other Content Types</h2>
+		<p><a href="http://google.com">Outside webpage (IFrame)</a></p>
+		<p><a title="Homer Defined" href="../content/ajax.html">Outside HTML (Ajax)</a></p>
+		<p><a id="inline" href="#">Inline HTML</a></p>
+		<p><a class="flash" href="http://www.vimeo.com/2285902" title="Royksopp: Remind Me">Flash / Video</a></p>
+
+		<!-- This contains the hidden content for inline calls -->
+		<div class='hidden'>
+			<div id='inline_example1' style='padding:10px; background:#fff;'>
+			<p><strong>This content comes from a hidden element on this page.</strong></p>
+			<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
+			<a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
+			
+			<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
+			<p>Updating Content Example:<br />
+			<a class="flash" href="#">Click here to load new content</a></p>
+			</div>
+		</div>
+	</body>
+</html>

colorbox/example4/colorbox-ie.css

@@ -0,0 +1,15 @@
+/*
+	The following fixes png-transparency for IE6.  
+	It is also necessary for png-transparency to cooperate with the fade transition in IE7 & IE8
+	
+	Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.  
+	Colorbox preloads navigation hover classes to account for this.
+*/
+#cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopLeft.png, sizingMethod='scale');}
+#cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopCenter.png, sizingMethod='scale');}
+#cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderTopRight.png, sizingMethod='scale');}
+#cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomLeft.png, sizingMethod='scale');}
+#cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomCenter.png, sizingMethod='scale');}
+#cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderBottomRight.png, sizingMethod='scale');}
+#cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderMiddleLeft.png, sizingMethod='scale');}
+#cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/borderMiddleRight.png, sizingMethod='scale');}

colorbox/example4/colorbox.css

@@ -0,0 +1,39 @@
+/*
+    ColorBox Core Style
+    The following rules are the styles that are consistant between all ColorBox themes
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative; overflow:visible;}
+#cboxLoadedContent{overflow:auto;}
+#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+
+/* 
+	ColorBox example user style
+	These rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 
+	in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
+*/
+#cboxOverlay{background:#fff;}
+
+#colorBox{}
+	#cboxTopLeft{width:27px; height:27px; background:url(images/borderTopLeft.png) 0 0 no-repeat;}
+	#cboxTopCenter{height:27px; background:url(images/borderTopCenter.png) 0 0 repeat-x;}
+	#cboxTopRight{width:27px; height:27px; background:url(images/borderTopRight.png) 0 0 no-repeat;}
+	#cboxBottomLeft{width:27px; height:27px; background:url(images/borderBottomLeft.png) 0 0 no-repeat;}
+	#cboxBottomCenter{height:27px; background:url(images/borderBottomCenter.png) 0 0 repeat-x;}
+	#cboxBottomRight{width:27px; height:27px; background:url(images/borderBottomRight.png) 0 0 no-repeat;}
+	#cboxMiddleLeft{width:27px; background:url(images/borderMiddleLeft.png) 0 0 repeat-y;}
+	#cboxMiddleRight{width:27px; background:url(images/borderMiddleRight.png) 0 0 repeat-y;}
+	#cboxContent{background:#fff;}
+            #cboxLoadedContent{margin-bottom:20px;}
+            #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
+            #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
+            #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
+            #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
+            #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
+            #cboxLoadingOverlay{background:url(images/loading.gif) 5px 5px no-repeat #fff;}
+            #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

colorbox/example4/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<title>ColorBox Examples</title>
+		<style type="text/css">
+			body{font:12px/1.5 Verdana, Arial, san-serrif;}
+			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
+			h2{font-size:13px;}
+			.hidden{display:none;}
+		</style>
+		<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
+		<!--[if IE]>
+		<link type="text/css" media="screen" rel="stylesheet" href="colorbox-ie.css" title="example" />
+		<![endif]-->
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+		<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
+		<script type="text/javascript">
+			$(document).ready(function(){
+				//Examples of how to assign the ColorBox event to elements.
+				$("a[rel='jack']").colorbox({transition:"fade"});
+				$("a[rel='dogs']").colorbox({transition:"elastic"});
+				$("a[rel='river']").colorbox({transition:"none", width:"75%", height:"75%"});
+				$(".slideshow").colorbox({slideshow:true});
+				$("a.single").colorbox({}, function(){
+					alert('Howdy, this is an example callback.');
+				});
+				$("a[title='Homer Defined']").colorbox();
+				$(".flash").colorbox({href:"../content/flash.html"});
+				$("a[href='http://google.com']").colorbox({width:"80%", height:"80%", iframe:true});
+				
+				//Example of preserving a JavaScript event for inline calls.
+				$("#click").click(function(){ 
+					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
+				});
+				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
+			});
+		</script>
+	</head>
+	<body>
+		<h1>ColorBox Examples</h1>
+		<h2>fade transition</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="jack" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="jack" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="jack" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+		
+		<h2>elastic transition + changed default photo numbering</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="dogs" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="dogs" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="dogs" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>no transition + fixed width and height (75% of screen size)</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="river"  class='ohoopee' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>slideshow</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="ohoopee"  class='slideshow' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>Single photo with callback example</h2>
+		<p><a class='single' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Single Photo</a></p>
+
+		<h2>Other Content Types</h2>
+		<p><a href="http://google.com">Outside webpage (IFrame)</a></p>
+		<p><a title="Homer Defined" href="../content/ajax.html">Outside HTML (Ajax)</a></p>
+		<p><a id="inline" href="#">Inline HTML</a></p>
+		<p><a class="flash" href="http://www.vimeo.com/2285902" title="Royksopp: Remind Me">Flash / Video</a></p>
+
+		<!-- This contains the hidden content for inline calls -->
+		<div class='hidden'>
+			<div id='inline_example1' style='padding:10px; background:#fff;'>
+			<p><strong>This content comes from a hidden element on this page.</strong></p>
+			<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
+			<a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
+			
+			<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
+			<p>Updating Content Example:<br />
+			<a class="flash" href="#">Click here to load new content</a></p>
+			</div>
+		</div>
+	</body>
+</html>

colorbox/example5/colorbox.css

@@ -0,0 +1,49 @@
+/*
+    ColorBox Core Style
+    The following rules are the styles that are consistant between all ColorBox themes
+*/
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
+#cboxOverlay{position:fixed; width:100%; height:100%;}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative; overflow:visible;}
+#cboxLoadedContent{overflow:auto;}
+#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
+#cboxTitle{margin:0;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+
+/* 
+	ColorBox example user style
+	The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, 
+	in hope that this will make the relationship easier to understand. Thanks, jack@colorpowered.com
+*/
+#cboxOverlay{background:#000;}
+
+#colorbox{}
+	#cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) top left no-repeat;}
+	#cboxTopCenter{height:14px; background:url(images/borderHorizontal.png) top left repeat-x;}
+	#cboxTopRight{width:14px; height:14px; background:url(images/controls.png) top right no-repeat;}
+	#cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) bottom left no-repeat;}
+	#cboxBottomCenter{height:43px; background:url(images/borderHorizontal.png) bottom left repeat-x;}
+	#cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) bottom right no-repeat;}
+	#cboxMiddleLeft{width:14px; background:url(images/borderVertical.png) top left repeat-y;}
+	#cboxMiddleRight{width:14px; background:url(images/borderVertical.png) top right repeat-y;}
+	#cboxContent{background:#fff;}
+		#cboxLoadedContent{margin-bottom:5px;}
+		#cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;}
+                #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;}
+                #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#949494;}
+                #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#949494;}
+                
+                #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(images/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;}
+                #cboxPrevious{left:0px; background-position: -14px -23px;}
+                #cboxPrevious.hover{background-position:-14px 0px;}
+                #cboxNext{left:27px; background-position:-37px -23px;}
+                #cboxNext.hover{background-position:-37px 0px;}
+		#cboxClose{right:0; background-position:-60px -23px;}
+		#cboxClose.hover{background-position:-60px 0px;}
+
+                .cboxSlideshow_on #cboxSlideshow{background-position:-83px -0px; right:27px;}
+                .cboxSlideshow_on #cboxSlideshow.hover{background-position:-106px -0px;}
+                .cboxSlideshow_off #cboxSlideshow{background-position:-106px -23px; right:27px;}
+                .cboxSlideshow_off #cboxSlideshow.hover{background-position:-83px -0px;}

colorbox/example5/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+		<title>ColorBox Examples</title>
+		<style type="text/css">
+			body{font:12px/1.5 Verdana, Arial, san-serrif;}
+			a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
+			h2{font-size:13px;}
+			.hidden{display:none;}
+		</style>
+		<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
+		<!--
+		This example has no IE-Only Stylesheet because the theme uses no transparent png files.
+		-->
+		
+		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
+		<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
+		<script type="text/javascript">
+			$(document).ready(function(){
+				//Examples of how to assign the ColorBox event to elements.
+				$("a[rel='jack']").colorbox({transition:"fade"});
+				$("a[rel='dogs']").colorbox({transition:"elastic"});
+				$("a[rel='river']").colorbox({transition:"none", width:"75%", height:"75%"});
+				$(".slideshow").colorbox({slideshow:true});
+				$("a.single").colorbox({}, function(){
+					alert('Howdy, this is an example callback.');
+				});
+				$("a[title='Homer Defined']").colorbox();
+				$(".flash").colorbox({href:"../content/flash.html"});
+				$("a[href='http://google.com']").colorbox({width:"80%", height:"80%", iframe:true});
+				
+				//Example of preserving a JavaScript event for inline calls.
+				$("#click").click(function(){ 
+					$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
+					return false;
+				});
+				$("#inline").colorbox({width:"50%", inline:true, href:"#inline_example1", title:"hello"});
+			});
+		</script>
+	</head>
+	<body>
+		<h1>ColorBox Examples</h1>
+		<h2>fade transition</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="jack" title="Me and my grandfather on the Ohoopee">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="jack" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="jack" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+		
+		<h2>elastic transition + changed default photo numbering</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="dogs" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="dogs" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="dogs" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>no transition + fixed width and height (75% of screen size)</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="river"  class='ohoopee' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="river"  class='ohoopee' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>slideshow</h2>
+		<p><a href="../content/ohoopee1.jpg" rel="ohoopee"  class='slideshow' title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
+		<p><a href="../content/ohoopee2.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as a child">Grouped Photo 2</a></p>
+		<p><a href="../content/ohoopee3.jpg" rel="ohoopee"  class='slideshow' title="On the Ohoopee as an adult">Grouped Photo 3</a></p>
+
+		<h2>Single photo with callback example</h2>
+		<p><a class='single' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Single Photo</a></p>
+
+		<h2>Other Content Types</h2>
+		<p><a href="http://google.com">Outside webpage (IFrame)</a></p>
+		<p><a title="Homer Defined" href="../content/ajax.html">Outside HTML (Ajax)</a></p>
+		<p><a id="inline" href="#">Inline HTML</a></p>
+		<p><a class="flash" href="http://www.vimeo.com/2285902" title="Royksopp: Remind Me">Flash / Video</a></p>
+
+		<!-- This contains the hidden content for inline calls -->
+		<div class='hidden'>
+			<div id='inline_example1' style='padding:10px; background:#fff;'>
+			<p><strong>This content comes from a hidden element on this page.</strong></p>
+			<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.<br />
+			<a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
+			
+			<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
+			<p>Updating Content Example:<br />
+			<a class="flash" href="#">Click here to load new content</a></p>
+			</div>
+		</div>
+	</body>
+</html>

css/balder.css

@@ -0,0 +1,84 @@
+/* @group Reset */
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+body {line-height:1.5;}
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;}
+table, td, th {vertical-align:middle;}
+blockquote:before, blockquote:after, q:before, q:after {content:"";}
+blockquote, q {quotes:"" "";}
+a img {border:none;}
+
+
+
+/* @end */
+
+/* @group Typography */
+
+body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
+h1, h2, h3, h4, h5, h6 {font-weight:normal;}
+h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
+h2 {font-size:2em;margin-bottom:0.75em;}
+h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
+h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
+h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
+h6 {font-size:1em;font-weight:bold;}
+h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
+p {margin:0 0 1.5em;}
+p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
+p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
+a:focus, a:hover {color:#000;}
+a {color:#009;text-decoration:underline;}
+blockquote {margin:1.5em;color:#666;font-style:italic;}
+strong {font-weight:bold;}
+em, dfn {font-style:italic;}
+dfn {font-weight:bold;}
+sup, sub {line-height:0;}
+abbr, acronym {border-bottom:1px dotted #666;}
+address {margin:0 0 1.5em;font-style:italic;}
+del {color:#666;}
+pre {margin:1.5em 0;white-space:pre;}
+pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
+li ul, li ol {margin:0 1.5em;}
+ul, ol {margin:0 1.5em 1.5em 1.5em;}
+ul {list-style-type:disc;}
+ol {list-style-type:decimal;}
+dl {margin:0 0 1.5em 0;}
+dl dt {font-weight:bold;}
+dd {margin-left:1.5em;}
+table {margin-bottom:1.4em;width:100%;}
+th {font-weight:bold;}
+thead th {background:#c3d9ff;}
+th, td, caption {padding:4px 10px 4px 5px;}
+tr.even td {background:#e5ecf9;}
+tfoot {font-style:italic;}
+caption {background:#eee;}
+.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
+.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
+.hide {display:none;}
+.quiet {color:#666;}
+.loud {color:#000;}
+.highlight {background:#ff0;}
+.added {background:#060;color:#fff;}
+.removed {background:#900;color:#fff;}
+.first {margin-left:0;padding-left:0;}
+.last {margin-right:0;padding-right:0;}
+.top {margin-top:0;padding-top:0;}
+.bottom {margin-bottom:0;padding-bottom:0;}
+
+
+
+/* @end */
+
+#container {
+	margin:  30px auto;
+	width:  850px;
+}
+
+#container h1 {
+    margin-bottom: 1em;
+}
+
+#screenshots2 {
+    display:none;
+}

index.html

@@ -52,29 +52,23 @@ You seem to be the curious-type so go ahead and read more about me on <a href="h
 
 <h2>Features</h2>
 <ul>
-<li>Stores photos to disk in folders (or store on Amazon S3, Rackspace, Google Storage or Gridfs)</li>
+<li>Stores photos to disk in folders</li>
 <li>Create multiple thumbnails of custom sizes</li>
 <li>Read and writes EXIF/IPTC title, description and keywords</li>
 <li>Organize in albums (as events in iPhoto)</li>
 <li>Combine albums in collections (as albums in iPhoto)</li>
-<li>Upload multiple photos (even without Flash)</li>
+<li>Upload multiple photos (can also scan existing folder structure)</li>
 <li>Tag photos. Can also tag albums (actually all photos in album is tagged)</li>
 <li>User management with roles and permissions</li>
-<li>Private mode (need to login)</li>
 <li>Geo-location of albums &amp; photos with Google Maps integration</li>
 </ul>
 
-<p>
-<a href="https://github.com/espen/balder/issues?labels=Feature+request&sort=created&direction=desc&state=open&page=1">Upcoming features</a>
-</p>
-
 <h3 id="balder">Balder?</h3>
 <p>Balder, or baldr which is the correct old norse spelling, was the <a href="http://en.wikipedia.org/wiki/Baldr">norse god of light and beauty</a>.</p>
 
 
 </div>
 
-<a href="http://github.com/espen/balder/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub" /></a>
 
 <script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

javascript/balder.js

@@ -0,0 +1,3 @@
+jQuery(function($) {
+    $("a[rel='screenshot']").colorbox({transition:"elastic"})
+})