move old site
207
colorbox/README
Executable 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
5
colorbox/colorbox/jquery.colorbox-min.js
vendored
Executable file
562
colorbox/colorbox/jquery.colorbox.js
Executable 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
|
@ -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
|
@ -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&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=2285902&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&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
After Width: | Height: | Size: 8.7 KiB |
BIN
colorbox/content/marylou.jpg
Executable file
After Width: | Height: | Size: 76 KiB |
BIN
colorbox/content/ohoopee1.jpg
Executable file
After Width: | Height: | Size: 111 KiB |
BIN
colorbox/content/ohoopee2.jpg
Executable file
After Width: | Height: | Size: 151 KiB |
BIN
colorbox/content/ohoopee3.jpg
Executable file
After Width: | Height: | Size: 114 KiB |
15
colorbox/example1/colorbox-ie.css
Executable 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
|
@ -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;}
|
BIN
colorbox/example1/images/borderBottomCenter.png
Executable file
After Width: | Height: | Size: 93 B |
BIN
colorbox/example1/images/borderBottomLeft.png
Executable file
After Width: | Height: | Size: 298 B |
BIN
colorbox/example1/images/borderBottomRight.png
Executable file
After Width: | Height: | Size: 276 B |
BIN
colorbox/example1/images/borderMiddleLeft.png
Executable file
After Width: | Height: | Size: 138 B |
BIN
colorbox/example1/images/borderMiddleRight.png
Executable file
After Width: | Height: | Size: 95 B |
BIN
colorbox/example1/images/borderTopCenter.png
Executable file
After Width: | Height: | Size: 93 B |
BIN
colorbox/example1/images/borderTopLeft.png
Executable file
After Width: | Height: | Size: 275 B |
BIN
colorbox/example1/images/borderTopRight.png
Executable file
After Width: | Height: | Size: 202 B |
BIN
colorbox/example1/images/controls.png
Executable file
After Width: | Height: | Size: 3.7 KiB |
BIN
colorbox/example1/images/loading.gif
Executable file
After Width: | Height: | Size: 9.2 KiB |
BIN
colorbox/example1/images/loading_background.png
Executable file
After Width: | Height: | Size: 157 B |
BIN
colorbox/example1/images/overlay.png
Executable file
After Width: | Height: | Size: 192 B |
85
colorbox/example1/index.html
Executable 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
|
@ -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;}
|
BIN
colorbox/example2/images/controls.png
Executable file
After Width: | Height: | Size: 991 B |
BIN
colorbox/example2/images/loading.gif
Executable file
After Width: | Height: | Size: 2 KiB |
87
colorbox/example2/index.html
Executable 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
|
@ -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;}
|
BIN
colorbox/example3/images/controls.png
Executable file
After Width: | Height: | Size: 2 KiB |
BIN
colorbox/example3/images/loading.gif
Executable file
After Width: | Height: | Size: 2 KiB |
82
colorbox/example3/index.html
Executable 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>
|
15
colorbox/example4/colorbox-ie.css
Executable 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
|
@ -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;}
|
BIN
colorbox/example4/images/borderBottomCenter.png
Executable file
After Width: | Height: | Size: 172 B |
BIN
colorbox/example4/images/borderBottomLeft.png
Executable file
After Width: | Height: | Size: 426 B |
BIN
colorbox/example4/images/borderBottomRight.png
Executable file
After Width: | Height: | Size: 407 B |
BIN
colorbox/example4/images/borderMiddleLeft.png
Executable file
After Width: | Height: | Size: 163 B |
BIN
colorbox/example4/images/borderMiddleRight.png
Executable file
After Width: | Height: | Size: 164 B |
BIN
colorbox/example4/images/borderTopCenter.png
Executable file
After Width: | Height: | Size: 162 B |
BIN
colorbox/example4/images/borderTopLeft.png
Executable file
After Width: | Height: | Size: 363 B |
BIN
colorbox/example4/images/borderTopRight.png
Executable file
After Width: | Height: | Size: 450 B |
BIN
colorbox/example4/images/loading.gif
Executable file
After Width: | Height: | Size: 2 KiB |
85
colorbox/example4/index.html
Executable 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
|
@ -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;}
|
BIN
colorbox/example5/images/borderHorizontal.png
Executable file
After Width: | Height: | Size: 208 B |
BIN
colorbox/example5/images/borderVertical.png
Executable file
After Width: | Height: | Size: 162 B |
BIN
colorbox/example5/images/controls.png
Executable file
After Width: | Height: | Size: 2.9 KiB |
BIN
colorbox/example5/images/loading.gif
Executable file
After Width: | Height: | Size: 9.2 KiB |
BIN
colorbox/example5/images/loading_background.png
Executable file
After Width: | Height: | Size: 218 B |
86
colorbox/example5/index.html
Executable 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
|
@ -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;
|
||||
}
|
BIN
images/album-add-to-collection.png
Normal file
After Width: | Height: | Size: 113 KiB |
BIN
images/album.png
Normal file
After Width: | Height: | Size: 230 KiB |
BIN
images/collections.png
Normal file
After Width: | Height: | Size: 133 KiB |
BIN
images/edit_multiple.png
Normal file
After Width: | Height: | Size: 84 KiB |
BIN
images/photo.png
Normal file
After Width: | Height: | Size: 215 KiB |
BIN
images/upload.png
Normal file
After Width: | Height: | Size: 80 KiB |
BIN
images/upload_multiple.png
Normal file
After Width: | Height: | Size: 120 KiB |
BIN
images/upload_multiple2.png
Normal file
After Width: | Height: | Size: 128 KiB |
BIN
images/upload_photos_progress.png
Normal file
After Width: | Height: | Size: 92 KiB |
10
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 & 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
|
@ -0,0 +1,3 @@
|
|||
jQuery(function($) {
|
||||
$("a[rel='screenshot']").colorbox({transition:"elastic"})
|
||||
})
|