[44] | 1 | /*
|
---|
| 2 | ColorBox v1.05 - a full featured, light-weight, customizable lightbox based on jQuery 1.3
|
---|
| 3 | (c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com
|
---|
| 4 | Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
|
---|
| 5 | */
|
---|
| 6 |
|
---|
| 7 | (function(jQuery){
|
---|
| 8 |
|
---|
| 9 | var index, related, loadingElement, modal, modalOverlay, modalLoading, modalContent, modalLoadedContent, modalClose, borderTopLeft, borderTopCenter, borderTopRight, borderMiddleLeft, borderMiddleRight, borderBottomLeft, borderBottomCenter, borderBottomRight;
|
---|
| 10 |
|
---|
| 11 | jQuery(function(){
|
---|
| 12 | //Initialize the modal, preload the interface graphics, and wait until called.
|
---|
| 13 | jQuery("body").append(
|
---|
| 14 | jQuery([
|
---|
| 15 | modalOverlay = jQuery('<div id="modalBackgroundOverlay" />')[0],
|
---|
| 16 | modal = jQuery('<div id="colorbox" />')[0]
|
---|
| 17 | ]).hide()
|
---|
| 18 | );
|
---|
| 19 |
|
---|
| 20 | jQuery(modal).append(
|
---|
| 21 | jQuery([
|
---|
| 22 | borderTopLeft = jQuery('<div id="borderTopLeft" />')[0],
|
---|
| 23 | borderTopCenter = jQuery('<div id="borderTopCenter" />')[0],
|
---|
| 24 | borderTopRight = jQuery('<div id="borderTopRight" />')[0],
|
---|
| 25 | borderMiddleLeft = jQuery('<div id="borderMiddleLeft" />')[0],
|
---|
| 26 | borderMiddleRight = jQuery('<div id="borderMiddleRight" />')[0],
|
---|
| 27 | borderBottomLeft = jQuery('<div id="borderBottomLeft" />')[0],
|
---|
| 28 | borderBottomCenter = jQuery('<div id="borderBottomCenter" />')[0],
|
---|
| 29 | borderBottomRight = jQuery('<div id="borderBottomRight" />')[0],
|
---|
| 30 | modalContent = jQuery('<div id="modalContent" />')[0]
|
---|
| 31 | ])
|
---|
| 32 | );
|
---|
| 33 |
|
---|
| 34 | jQuery(modalContent).append(
|
---|
| 35 | jQuery([
|
---|
| 36 | modalLoadedContent = jQuery('<div id="modalLoadedContent"><a id="contentPrevious" href="#"></a><a id="contentNext" href="#"></a><span id="contentCurrent"></span><br id="modalInfoBr"/><span id="contentTitle"></span><div id="preloadPrevious"></div><div id="preloadNext"></div><div id="preloadClose"></div></div>')[0],
|
---|
| 37 | modalLoadingOverlay = jQuery('<div id="modalLoadingOverlay" />')[0],
|
---|
| 38 | modalClose = jQuery('<a id="modalClose" href="#"></a>')[0]
|
---|
| 39 | ])
|
---|
| 40 | );
|
---|
| 41 |
|
---|
| 42 | jQuery(modalClose).click(function(){
|
---|
| 43 | closeModal();
|
---|
| 44 | return false;
|
---|
| 45 | });
|
---|
| 46 | });
|
---|
| 47 |
|
---|
| 48 | function setModalOverlay(){
|
---|
| 49 | jQuery([modalOverlay]).css({"position":"absolute", width:jQuery(window).width(), height:jQuery(window).height(), top:jQuery(window).scrollTop(), left:jQuery(window).scrollLeft()});
|
---|
| 50 | }
|
---|
| 51 |
|
---|
| 52 | function keypressEvents(e){
|
---|
| 53 | if(e.keyCode == 27){
|
---|
| 54 | closeModal();
|
---|
| 55 | return false;
|
---|
| 56 | }
|
---|
| 57 | else if(e.keyCode == 37){
|
---|
| 58 | jQuery("a#contentPrevious").click();
|
---|
| 59 | return false;
|
---|
| 60 | }
|
---|
| 61 | else if(e.keyCode == 39){
|
---|
| 62 | jQuery("a#contentNext").click();
|
---|
| 63 | return false
|
---|
| 64 | }
|
---|
| 65 | }
|
---|
| 66 |
|
---|
| 67 | function closeModal(){
|
---|
| 68 | jQuery(modal).removeData("open");
|
---|
| 69 | jQuery([modalOverlay, modal]).fadeOut("fast", function(){
|
---|
| 70 | jQuery(modalLoadedContent).empty();
|
---|
| 71 | jQuery([modalOverlay, modal]).hide();//Seems unnecessary, but sometimes IE6 does not hide the modal.
|
---|
| 72 | });
|
---|
| 73 | if(loadingElement){jQuery(loadingElement).remove()};
|
---|
| 74 | jQuery(document).unbind('keydown', keypressEvents);
|
---|
| 75 | jQuery(window).unbind('resize scroll', setModalOverlay);
|
---|
| 76 | }
|
---|
| 77 |
|
---|
| 78 | jQuery.fn.colorbox = function(settings) {
|
---|
| 79 |
|
---|
| 80 | settings = jQuery.extend({}, jQuery.fn.colorbox.settings, settings);
|
---|
| 81 |
|
---|
| 82 | //sets the position of the modal on screen. A transition speed of 0 will result in no animation.
|
---|
| 83 | function modalPosition(modalWidth, modalHeight, transitionSpeed, callback){
|
---|
| 84 | var windowHeight;
|
---|
| 85 | (typeof(window.innerHeight)=='number')?windowHeight=window.innerHeight:windowHeight=document.documentElement.clientHeight;
|
---|
| 86 | var colorboxHeight = modalHeight + jQuery(borderTopLeft).height() + jQuery(borderBottomLeft).height();
|
---|
| 87 | var colorboxWidth = modalWidth + jQuery(borderTopLeft).width() + jQuery(borderBottomLeft).width();
|
---|
| 88 | var posTop = windowHeight/2 - colorboxHeight/2 + jQuery(window).scrollTop();
|
---|
| 89 | var posLeft = jQuery(window).width()/2 - colorboxWidth/2 + jQuery(window).scrollLeft();
|
---|
| 90 | if(colorboxHeight > windowHeight){
|
---|
| 91 | posTop -=(colorboxHeight - windowHeight);
|
---|
| 92 | }
|
---|
| 93 | if(posTop < 0){posTop = 0;} //keeps the box from expanding to an inaccessible area offscreen.
|
---|
| 94 | if(posLeft < 0){posLeft = 0;}
|
---|
| 95 | jQuery(modal).animate({height:colorboxHeight, top:posTop, left:posLeft, width:colorboxWidth}, transitionSpeed);
|
---|
| 96 |
|
---|
| 97 | //each part is animated seperately to keep them from disappearing during the animation process, which is what would happen if they were positioned relative to a single element being animated.
|
---|
| 98 | jQuery(borderMiddleLeft).animate({top:jQuery(borderTopLeft).height(), left:0, height:modalHeight}, transitionSpeed);
|
---|
| 99 | jQuery(borderMiddleRight).animate({top:jQuery(borderTopRight).height(), left:colorboxWidth-jQuery(borderMiddleRight).width(), height:modalHeight}, transitionSpeed);
|
---|
| 100 |
|
---|
| 101 | jQuery(borderTopLeft).animate({top:0, left:0}, transitionSpeed);
|
---|
| 102 | jQuery(borderTopCenter).animate({top:0, left:jQuery(borderTopLeft).width(), width:modalWidth}, transitionSpeed);
|
---|
| 103 | jQuery(borderTopRight).animate({top: 0, left: colorboxWidth - jQuery(borderTopRight).width()}, transitionSpeed);
|
---|
| 104 |
|
---|
| 105 | jQuery(borderBottomLeft).animate({top:colorboxHeight-jQuery(borderBottomLeft).height(), left:0}, transitionSpeed);
|
---|
| 106 | jQuery(borderBottomCenter).animate({top:colorboxHeight-jQuery(borderBottomLeft).height(), left:jQuery(borderBottomLeft).width(), width:modalWidth}, transitionSpeed);
|
---|
| 107 | jQuery(borderBottomRight).animate({top: colorboxHeight - jQuery(borderBottomLeft).height(), left: colorboxWidth - jQuery(borderBottomRight).width()}, transitionSpeed);
|
---|
| 108 | jQuery(modalContent).animate({height:modalHeight, width:modalWidth, top:jQuery(borderTopLeft).height(), left:jQuery(borderTopLeft).width()}, transitionSpeed, function(){
|
---|
| 109 | if(callback){callback();}
|
---|
| 110 | if(jQuery.browser.msie && jQuery.browser.version < 7){
|
---|
| 111 | setModalOverlay();
|
---|
| 112 | }
|
---|
| 113 | });
|
---|
| 114 | }
|
---|
| 115 |
|
---|
| 116 | var preloads = [];
|
---|
| 117 |
|
---|
| 118 | function preload(){
|
---|
| 119 |
|
---|
| 120 | }
|
---|
| 121 |
|
---|
| 122 | function centerModal(contentHtml, contentInfo){
|
---|
| 123 | jQuery(modalLoadedContent).hide().html(contentHtml).append(contentInfo);
|
---|
| 124 | if(settings.contentWidth){jQuery(modalLoadedContent).css({"width":settings.contentWidth})}
|
---|
| 125 | if(settings.contentHeight){jQuery(modalLoadedContent).css({"height":settings.contentHeight})}
|
---|
| 126 | if (settings.transition == "elastic") {
|
---|
| 127 | modalPosition(jQuery(modalLoadedContent).outerWidth(true), jQuery(modalLoadedContent).outerHeight(true), settings.transitionSpeed, function(){
|
---|
| 128 | jQuery(modalLoadedContent).show();
|
---|
| 129 | jQuery(modalLoadingOverlay).hide();
|
---|
| 130 | });
|
---|
| 131 |
|
---|
| 132 | }
|
---|
| 133 | else {
|
---|
| 134 | jQuery(modal).animate({"opacity":0}, settings.transitionSpeed, function(){
|
---|
| 135 | modalPosition(jQuery(modalLoadedContent).outerWidth(true), jQuery(modalLoadedContent).outerHeight(true), 0, function(){
|
---|
| 136 | jQuery(modalLoadedContent).show();
|
---|
| 137 | jQuery(modalLoadingOverlay).hide();
|
---|
| 138 | jQuery(modal).animate({"opacity":1}, settings.transitionSpeed);
|
---|
| 139 | });
|
---|
| 140 | });
|
---|
| 141 | }
|
---|
| 142 | var preloads = preload();
|
---|
| 143 | }
|
---|
| 144 |
|
---|
| 145 | function contentNav(){
|
---|
| 146 | jQuery(modalLoadingOverlay).show();
|
---|
| 147 | if(jQuery(this).attr("id") == "contentPrevious"){
|
---|
| 148 | index > 0 ? index-- : index=related.length-1;
|
---|
| 149 | } else {
|
---|
| 150 | index < related.length-1 ? index++ : index = 0;
|
---|
| 151 | }
|
---|
| 152 | buildGallery(related[index]);
|
---|
| 153 | return false;
|
---|
| 154 | }
|
---|
| 155 |
|
---|
| 156 | function buildGallery(that){
|
---|
| 157 | var contentInfo = "<br id='modalInfoBr'/><span id='contentTitle'></span>";
|
---|
| 158 |
|
---|
| 159 | if (settings.contentInline) {
|
---|
| 160 | centerModal(jQuery(settings.contentInline).html(), contentInfo);
|
---|
| 161 | }
|
---|
| 162 | };
|
---|
| 163 |
|
---|
| 164 | jQuery(this).bind("click.colorbox", function () {
|
---|
| 165 | if (jQuery(modal).data("open") != true) {
|
---|
| 166 | jQuery(modal).data("open", true);
|
---|
| 167 | jQuery(modalLoadedContent).empty().css({
|
---|
| 168 | "height": "auto",
|
---|
| 169 | "width": "auto"
|
---|
| 170 | });
|
---|
| 171 | jQuery(modalClose).html(settings.modalClose);
|
---|
| 172 | jQuery(modalOverlay).css({
|
---|
| 173 | "opacity": settings.bgOpacity
|
---|
| 174 | });
|
---|
| 175 | jQuery([modalOverlay, modal, modalLoadingOverlay]).show();
|
---|
| 176 | jQuery(modalContent).css({
|
---|
| 177 | width: settings.initialWidth,
|
---|
| 178 | height: settings.initialHeight
|
---|
| 179 | });
|
---|
| 180 | modalPosition(jQuery(modalContent).width(), jQuery(modalContent).height(), 0);
|
---|
| 181 | if (this.rel) {
|
---|
| 182 | related = jQuery("a[rel='" + this.rel + "']");
|
---|
| 183 | index = jQuery(related).index(this);
|
---|
| 184 | }
|
---|
| 185 | else {
|
---|
| 186 | related = jQuery(this);
|
---|
| 187 | index = 0;
|
---|
| 188 | }
|
---|
| 189 | buildGallery(related[index]);
|
---|
| 190 | jQuery(document).bind('keydown', keypressEvents);
|
---|
| 191 | if (jQuery.browser.msie && jQuery.browser.version < 7) {
|
---|
| 192 | jQuery(window).bind("resize scroll", setModalOverlay);
|
---|
| 193 | }
|
---|
| 194 | }
|
---|
| 195 | return false;
|
---|
| 196 | });
|
---|
| 197 |
|
---|
| 198 | if(settings.open==true && jQuery(modal).data("open")!=true){
|
---|
| 199 | jQuery(this).triggerHandler('click.colorbox');
|
---|
| 200 | }
|
---|
| 201 |
|
---|
| 202 | return this.each(function() {
|
---|
| 203 | });
|
---|
| 204 | };
|
---|
| 205 |
|
---|
| 206 | /*
|
---|
| 207 | ColorBox Default Settings.
|
---|
| 208 |
|
---|
| 209 | The colorbox() function takes one argument, an object of key/value pairs, that are used to initialize the modal.
|
---|
| 210 |
|
---|
| 211 | Please do not change these settings here, instead overwrite these settings when attaching the colorbox() event to your anchors.
|
---|
| 212 | Example (Global) : jQuery.fn.colorbox.settings.transition = "fade"; //changes the transition to fade for all colorBox() events proceeding it's declaration.
|
---|
| 213 | Example (Specific) : jQuery("a[href='http://www.google.com']").colorbox({contentWidth:"700px", contentHeight:"450px", contentIframe:true});
|
---|
| 214 | */
|
---|
| 215 | jQuery.fn.colorbox.settings = {
|
---|
| 216 | transition : "elastic", // "elastic" or "fade". Set transitionSpeed to 0 for no transition.
|
---|
| 217 | transitionSpeed : 350, // Sets the speed of the fade and elastic transition, in milliseconds. Set to 0 for no transition.
|
---|
| 218 | initialWidth : 300, // Set the initial width of the modal, prior to any content being loaded.
|
---|
| 219 | initialHeight : 100, // Set the initial height of the modal, prior to any content being loaded.
|
---|
| 220 | contentWidth : false, // Set a fixed width for div#modalLoadedContent. Example: "500px"
|
---|
| 221 | contentHeight : false, // Set a fixed height for div#modalLoadedContent. Example: "500px"
|
---|
| 222 | contentAjax : false, // Set this to the file, or file+selector of content that will be loaded through an external file. Example "include.html" or "company.inc.php div#ceo_bio"
|
---|
| 223 | contentInline : false, // Set this to the selector, in jQuery selector format, of inline content to be displayed. Example "#myHiddenDiv".
|
---|
| 224 | contentIframe : false, // If 'true' specifies that content should be displayed in an iFrame.
|
---|
| 225 | bgOpacity : 0.85, // The modalBackgroundOverlay opacity level. Range: 0 to 1.
|
---|
| 226 | preloading : true, // Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading. Set to 'false' to disable.
|
---|
| 227 | contentCurrent : "{current} of {total}", // the format of the contentCurrent information
|
---|
| 228 | contentPrevious : "previous", // the anchor text for the previous link in a shared relation group (same values for 'rel').
|
---|
| 229 | contentNext : "next", // the anchor text for the next link in a shared relation group (same 'rel' attribute').
|
---|
| 230 | modalClose : "close", // the anchor text for the close link. Esc will also close the modal.
|
---|
| 231 | open : false //Automatically opens ColorBox. (fires the click.colorbox event without waiting for user input).
|
---|
| 232 | }
|
---|
| 233 |
|
---|
| 234 | })(jQuery);
|
---|
| 235 |
|
---|