move old site

This commit is contained in:
Espen Antonsen 2011-05-19 20:29:38 +08:00
parent cbf5693b20
commit 169566bb25
66 changed files with 3248 additions and 8 deletions

207
colorbox/README Executable file
View file

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

1692
colorbox/colorbox.ai Executable file

File diff suppressed because one or more lines are too long

5
colorbox/colorbox/jquery.colorbox-min.js vendored Executable file

File diff suppressed because one or more lines are too long

View file

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

8
colorbox/content/ajax.html Executable file
View file

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

1
colorbox/content/flash.html Executable file
View file

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

BIN
colorbox/content/homer.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
colorbox/content/marylou.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

BIN
colorbox/content/ohoopee1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

BIN
colorbox/content/ohoopee2.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

BIN
colorbox/content/ohoopee3.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

View file

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

43
colorbox/example1/colorbox.css Executable file
View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 298 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 138 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 202 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 B

85
colorbox/example1/index.html Executable file
View file

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

44
colorbox/example2/colorbox.css Executable file
View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 991 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

87
colorbox/example2/index.html Executable file
View file

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

35
colorbox/example3/colorbox.css Executable file
View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

82
colorbox/example3/index.html Executable file
View file

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

View file

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

39
colorbox/example4/colorbox.css Executable file
View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 426 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 407 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 363 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 450 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

85
colorbox/example4/index.html Executable file
View file

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

49
colorbox/example5/colorbox.css Executable file
View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 218 B

86
colorbox/example5/index.html Executable file
View file

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

84
css/balder.css Normal file
View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
images/album.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 230 KiB

BIN
images/collections.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

BIN
images/edit_multiple.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

BIN
images/photo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

BIN
images/upload.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
images/upload_multiple.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

BIN
images/upload_multiple2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

View file

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

3
javascript/balder.js Normal file
View file

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

19
javascript/jquery-1.3.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long