[3298] | 1 | /* |
---|
| 2 | ColorBox v1.1.6 - 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 | /* Line 173 modified for Piwigo */ |
---|
| 8 | |
---|
| 9 | (function($){ |
---|
| 10 | var settings, loadedWidth, loadedHeight, interfaceHeight, interfaceWidth, index, related, loadingElement, $modal, modalWrap, $loadingOverlay, $overlay, $modalContent, $loaded, $close, $borderTopCenter, $borderMiddleLeft, $borderMiddleRight, $borderBottomCenter; |
---|
| 11 | function setModalOverlay(){ |
---|
| 12 | $overlay.css({"position":"absolute", width:$(window).width(), height:$(window).height(), top:$(window).scrollTop(), left:$(window).scrollLeft()}); |
---|
| 13 | } |
---|
| 14 | function keypressEvents(e){ |
---|
| 15 | if(e.keyCode == 37){ |
---|
| 16 | e.preventDefault(); |
---|
| 17 | $(document).unbind('keydown', keypressEvents); |
---|
| 18 | $("a#contentPrevious").click(); |
---|
| 19 | } else if(e.keyCode == 39){ |
---|
| 20 | e.preventDefault(); |
---|
| 21 | $(document).unbind('keydown', keypressEvents); |
---|
| 22 | $("a#contentNext").click(); |
---|
| 23 | } |
---|
| 24 | } |
---|
| 25 | function clearLoading(){ |
---|
| 26 | if($("#colorboxInlineTemp").length > 0){ |
---|
| 27 | $loaded.children().insertAfter("#colorboxInlineTemp"); |
---|
| 28 | } |
---|
| 29 | if(loadingElement){$(loadingElement).remove();} |
---|
| 30 | } |
---|
| 31 | |
---|
| 32 | // Convert % values to pixels |
---|
| 33 | function setSize(size, dimension){ |
---|
| 34 | return (typeof size == 'string') ? (size.match(/%/) ? (dimension/100)*parseInt(size, 10) : parseInt(size, 10)) : size; |
---|
| 35 | } |
---|
| 36 | |
---|
| 37 | /* |
---|
| 38 | Initialize the modal: store common calculations, preload the interface graphics, append the html. |
---|
| 39 | This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only |
---|
| 40 | having to run once, instead of each time colorbox is opened. |
---|
| 41 | */ |
---|
| 42 | $(function(){//jQuery shortcut for $(document).ready(function(){}); |
---|
| 43 | $("body").append( |
---|
| 44 | $overlay = $('<div id="modalBackgroundOverlay" />').hide(), |
---|
| 45 | $modal = $('<div id="colorbox" />').css("opacity", 0) |
---|
| 46 | ); |
---|
| 47 | |
---|
| 48 | $('<div id="modalWrap" />').appendTo($modal).append( |
---|
| 49 | $('<div><div id="borderTopLeft" /><div id="borderTopCenter" /><div id="borderTopRight" /></div>'), |
---|
| 50 | $borderMiddleLeft = $('<div id="borderMiddleLeft" />'), |
---|
| 51 | $modalContent = $('<div id="modalContent" />'), |
---|
| 52 | $borderMiddleRight = $('<div id="borderMiddleRight" />'), |
---|
| 53 | $('<div><div id="borderBottomLeft" /><div id="borderBottomCenter" /><div id="borderBottomRight" /></div>') |
---|
| 54 | ); |
---|
| 55 | $modalContent.append( |
---|
| 56 | //loaded is filled with temporary HTML to allow the CSS backgrounds for those elements to load before ColorBox is actually called. |
---|
| 57 | $loaded = $('<div id="modalLoadedContent"><a id="contentNext" href="#"></a><a id="contentPrevious" href="#"></a><span id="contentCurrent"></span><span id="contentTitle"></span><div id="preloadPrevious"></div><div id="preloadNext"></div><div id="preloadClose"></div></div>'), |
---|
| 58 | $loadingOverlay = $('<div id="modalLoadingOverlay" />'), |
---|
| 59 | $close = $('<a id="modalClose" href="#"></a>') |
---|
| 60 | ); |
---|
| 61 | |
---|
| 62 | $(document).bind("keydown.colorClose", function(e){ |
---|
| 63 | if (e.keyCode == 27) { |
---|
| 64 | e.preventDefault(); |
---|
| 65 | $.fn.colorbox.close(); |
---|
| 66 | } |
---|
| 67 | }); |
---|
| 68 | |
---|
| 69 | $close.click(function(event){ |
---|
| 70 | event.preventDefault(); |
---|
| 71 | $.fn.colorbox.close(); |
---|
| 72 | }); |
---|
| 73 | |
---|
| 74 | $borderTopCenter = $("#borderTopCenter"); |
---|
| 75 | $borderBottomCenter = $("#borderBottomCenter"); |
---|
| 76 | |
---|
| 77 | interfaceHeight = $borderTopCenter.height()+$borderBottomCenter.height()+$modalContent.outerHeight(true) - $modalContent.height();//Subtraction needed for IE6 |
---|
| 78 | interfaceWidth = $borderMiddleLeft.width()+$borderMiddleRight.width()+$modalContent.outerWidth(true) - $modalContent.width(); |
---|
| 79 | |
---|
| 80 | loadedHeight = $loaded.outerHeight(true); |
---|
| 81 | loadedWidth = $loaded.outerWidth(true); |
---|
| 82 | |
---|
| 83 | $loaded.empty(); |
---|
| 84 | $modal.css({"padding-bottom":interfaceHeight,"padding-right":interfaceWidth}).hide();//the padding removes the need to do size conversions during the animation step. |
---|
| 85 | |
---|
| 86 | //Archaic rollover code because IE8 is a piece of shit. Hopefully they'll fix their css-rollover bug so the following code can be removed. |
---|
| 87 | $("#contentPrevious, #contentNext, #modalClose").live('mouseover', function(){$(this).addClass("hover");}); |
---|
| 88 | $("#contentPrevious, #contentNext, #modalClose").live('mouseout', function(){$(this).removeClass("hover");}); |
---|
| 89 | }); |
---|
| 90 | |
---|
| 91 | $.fn.colorbox = function(settings, callback) { |
---|
| 92 | |
---|
| 93 | function modalPosition(mWidth, mHeight, speed, loadedCallback){ |
---|
| 94 | |
---|
| 95 | var winHeight = document.documentElement.clientHeight; |
---|
| 96 | var posTop = winHeight/2 - mHeight/2; |
---|
| 97 | var posLeft = document.documentElement.clientWidth/2 - mWidth/2; |
---|
| 98 | //keeps the box from expanding to an inaccessible area offscreen. |
---|
| 99 | if(mHeight > winHeight){posTop -=(mHeight - winHeight);} |
---|
| 100 | if(posTop < 0){posTop = 0;} |
---|
| 101 | if(posLeft < 0){posLeft = 0;} |
---|
| 102 | |
---|
| 103 | posTop+=$(window).scrollTop(); |
---|
| 104 | posLeft+=$(window).scrollLeft(); |
---|
| 105 | |
---|
| 106 | mWidth = mWidth - interfaceWidth; |
---|
| 107 | mHeight = mHeight - interfaceHeight; |
---|
| 108 | |
---|
| 109 | function modalDimensions(that){ |
---|
| 110 | $modalContent[0].style.width = $borderTopCenter[0].style.width = $borderBottomCenter[0].style.width = that.style.width; |
---|
| 111 | $modalContent[0].style.height = $borderMiddleLeft[0].style.height = $borderMiddleRight[0].style.height = that.style.height; |
---|
| 112 | } |
---|
| 113 | |
---|
| 114 | $modal.animate({height:mHeight, width:mWidth, top:posTop, left:posLeft}, {duration: speed, |
---|
| 115 | complete: function(){ |
---|
| 116 | if (loadedCallback) {loadedCallback();} |
---|
| 117 | modalDimensions(this); |
---|
| 118 | if ($.browser.msie && $.browser.version < 7) {setModalOverlay();} |
---|
| 119 | }, |
---|
| 120 | step: function(){ |
---|
| 121 | modalDimensions(this); |
---|
| 122 | } |
---|
| 123 | }); |
---|
| 124 | } |
---|
| 125 | var preloads = []; |
---|
| 126 | function preload(){ |
---|
| 127 | if(settings.preloading !== false && related.length>1 && related[index].href.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(.*))?$/i)){ |
---|
| 128 | var previous, next; |
---|
| 129 | previous = index > 0 ? related[index-1].href : related[related.length-1].href; |
---|
| 130 | next = index < related.length-1 ? related[index+1].href : related[0].href; |
---|
| 131 | return [$("<img />").attr("src", next), $("<img />").attr("src", previous)]; |
---|
| 132 | } |
---|
| 133 | return false; |
---|
| 134 | } |
---|
| 135 | |
---|
| 136 | function contentNav(){ |
---|
| 137 | $loadingOverlay.show(); |
---|
| 138 | if($(this).attr("id") == "contentPrevious"){ |
---|
| 139 | index = index > 0 ? index-1 : related.length-1; |
---|
| 140 | } else { |
---|
| 141 | index = index < related.length-1 ? index+1 : 0; |
---|
| 142 | } |
---|
| 143 | loadModal(related[index].href, related[index].title); |
---|
| 144 | return false; |
---|
| 145 | } |
---|
| 146 | |
---|
| 147 | function centerModal (object, contentInfo){ |
---|
| 148 | if($modal.data("open")!==true){ return false; } |
---|
| 149 | |
---|
| 150 | var speed = settings.transition=="none" ? 0 : settings.transitionSpeed; |
---|
| 151 | $loaded.remove(); |
---|
| 152 | $loaded = $(object); |
---|
| 153 | |
---|
| 154 | $loaded.hide() |
---|
| 155 | .appendTo('body') |
---|
| 156 | .css({width:(settings.fixedWidth)?settings.fixedWidth - loadedWidth - interfaceWidth:$loaded.width()}).css({height:(settings.fixedHeight)?settings.fixedHeight - loadedHeight - interfaceHeight:$loaded.height()}) |
---|
| 157 | .attr({id:"modalLoadedContent"}) |
---|
| 158 | .append(contentInfo) |
---|
| 159 | .prependTo($modalContent); |
---|
| 160 | |
---|
| 161 | if($("#modalPhoto").length > 0 && settings.fixedHeight){ |
---|
| 162 | var topMargin = (parseInt($loaded[0].style.height, 10) - parseInt($("#modalPhoto")[0].style.height, 10))/2; |
---|
| 163 | $("#modalPhoto").css({marginTop:(topMargin > 0?topMargin:0)}); |
---|
| 164 | } |
---|
| 165 | |
---|
| 166 | function setPosition(s){ |
---|
| 167 | modalPosition(parseInt($loaded[0].style.width, 10)+loadedWidth+interfaceWidth, parseInt($loaded[0].style.height, 10)+loadedHeight+interfaceHeight, s, function(){ |
---|
| 168 | if($modal.data("open")!==true){ |
---|
| 169 | return false; |
---|
| 170 | } |
---|
| 171 | $loaded.show(); |
---|
| 172 | $loadingOverlay.hide(); |
---|
| 173 | $(document).bind('keydown', keypressEvents); |
---|
| 174 | if (callback) { |
---|
| 175 | callback(related[index]); /* ----- PIWIGO MODIFICATION ----- */ |
---|
| 176 | } |
---|
| 177 | if (settings.transition === "fade"){ |
---|
| 178 | $modal.animate({"opacity":1}, speed); |
---|
| 179 | } |
---|
| 180 | return true; |
---|
| 181 | }); |
---|
| 182 | } |
---|
| 183 | if (settings.transition == "fade") { |
---|
| 184 | $modal.animate({"opacity":0}, speed, function(){setPosition(0);}); |
---|
| 185 | } else { |
---|
| 186 | setPosition(speed); |
---|
| 187 | } |
---|
| 188 | var preloads = preload(); |
---|
| 189 | return true; |
---|
| 190 | } |
---|
| 191 | |
---|
| 192 | function loadModal(href, title){ |
---|
| 193 | clearLoading(); |
---|
| 194 | var contentInfo = "<p id='contentTitle'>"+title+"</p>"; |
---|
| 195 | if(related.length>1){ |
---|
| 196 | contentInfo += "<span id='contentCurrent'> " + settings.contentCurrent + "</span>"; |
---|
| 197 | contentInfo = contentInfo.replace(/\{current\}/, index+1).replace(/\{total\}/, related.length); |
---|
| 198 | contentInfo += "<a id='contentPrevious' href='#'>"+settings.contentPrevious+"</a><a id='contentNext' href='#'>"+settings.contentNext+"</a> "; |
---|
| 199 | } |
---|
| 200 | if (settings.inline) { |
---|
| 201 | loadingElement = $('<div id="colorboxInlineTemp" />').hide().insertBefore($(href)[0]); |
---|
| 202 | centerModal($(href).wrapAll("<div />").parent(), contentInfo); |
---|
| 203 | } else if (settings.iframe) { |
---|
| 204 | centerModal($("<div><iframe name='iframe_"+new Date().getTime()+" 'frameborder=0 src =" + href + "></iframe></div>"), contentInfo);//timestamp to prevent caching. |
---|
| 205 | } else if (href.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(.*))?$/i)){ |
---|
| 206 | loadingElement = new Image(); |
---|
| 207 | loadingElement.onload = function(){ |
---|
| 208 | loadingElement.onload = null; |
---|
| 209 | centerModal($("<div />").css({width:this.width, height:this.height}).append($(this).css({width:this.width, height:this.height, display:"block", margin:"auto"}).attr('id', 'modalPhoto')), contentInfo); |
---|
| 210 | if(related.length > 1){ |
---|
| 211 | $(this).css({cursor:'pointer'}).click(contentNav); |
---|
| 212 | } |
---|
| 213 | }; |
---|
| 214 | loadingElement.src = href; |
---|
| 215 | }else { |
---|
| 216 | loadingElement = $('<div />').load(href, function(data, textStatus){ |
---|
| 217 | if(textStatus == "success"){ |
---|
| 218 | centerModal($(this), contentInfo); |
---|
| 219 | } else { |
---|
| 220 | centerModal($("<p>Request unsuccessful.</p>")); |
---|
| 221 | } |
---|
| 222 | }); |
---|
| 223 | } |
---|
| 224 | } |
---|
| 225 | |
---|
| 226 | settings = $.extend({}, $.fn.colorbox.settings, settings); |
---|
| 227 | |
---|
| 228 | $(this).unbind("click.colorbox").bind("click.colorbox", function () { |
---|
| 229 | if(settings.fixedWidth){ settings.fixedWidth = setSize(settings.fixedWidth, document.documentElement.clientWidth);} |
---|
| 230 | if(settings.fixedHeight){ settings.fixedHeight = setSize(settings.fixedHeight, document.documentElement.clientHeight);} |
---|
| 231 | if (this.rel && 'nofollow' != this.rel) { |
---|
| 232 | related = $("a[rel='" + this.rel + "']"); |
---|
| 233 | index = $(related).index(this); |
---|
| 234 | } |
---|
| 235 | else { |
---|
| 236 | related = $(this); |
---|
| 237 | index = 0; |
---|
| 238 | } |
---|
| 239 | |
---|
| 240 | if ($modal.data("open") !== true) { |
---|
| 241 | $(document).bind('keydown', keypressEvents); |
---|
| 242 | $close.html(settings.modalClose); |
---|
| 243 | $overlay.css({"opacity": settings.bgOpacity}).show(); |
---|
| 244 | $modal.data("open", true).css({"opacity":1}); |
---|
| 245 | |
---|
| 246 | modalPosition(setSize(settings.initialWidth, document.documentElement.clientWidth), setSize(settings.initialHeight, document.documentElement.clientHeight), 0); |
---|
| 247 | |
---|
| 248 | if ($.browser.msie && $.browser.version < 7) { |
---|
| 249 | $(window).bind("resize scroll", setModalOverlay); |
---|
| 250 | } |
---|
| 251 | } |
---|
| 252 | |
---|
| 253 | loadModal(settings.href ? settings.href : related[index].href, settings.title ? settings.title : related[index].title); |
---|
| 254 | $("a#contentPrevious, a#contentNext").die().live("click", contentNav); |
---|
| 255 | |
---|
| 256 | if(settings.overlayClose!==false){ |
---|
| 257 | $overlay.css({"cursor":"pointer"}).click(function(){$.fn.colorbox.close();}); |
---|
| 258 | } |
---|
| 259 | return false; |
---|
| 260 | }); |
---|
| 261 | |
---|
| 262 | if(settings.open!==false && $modal.data("open")!==true){ |
---|
| 263 | $(this).triggerHandler('click.colorbox'); |
---|
| 264 | } |
---|
| 265 | |
---|
| 266 | return this.each(function() { |
---|
| 267 | }); |
---|
| 268 | }; |
---|
| 269 | |
---|
| 270 | //public function for closing colorbox. To use this within an iframe use the following format: parent.$.fn.colorbox.close(); |
---|
| 271 | $.fn.colorbox.close = function(){ |
---|
| 272 | |
---|
| 273 | $('#contentTitle').remove(); |
---|
| 274 | clearLoading(); |
---|
| 275 | $overlay.css({cursor:"auto"}).fadeOut("fast"); |
---|
| 276 | $modal.stop(true, false).removeData("open").fadeOut("fast", function(){ |
---|
| 277 | $loaded.remove(); |
---|
| 278 | }); |
---|
| 279 | $(document).unbind('keydown', keypressEvents); |
---|
| 280 | $(window).unbind('resize scroll', setModalOverlay); |
---|
| 281 | return false; |
---|
| 282 | }; |
---|
| 283 | |
---|
| 284 | /* |
---|
| 285 | ColorBox Default Settings. |
---|
| 286 | |
---|
| 287 | The colorbox() function takes one argument, an object of key/value pairs, that are used to initialize the modal. |
---|
| 288 | |
---|
| 289 | Please do not change these settings here, instead overwrite these settings when attaching the colorbox() event to your anchors. |
---|
| 290 | Example (Global) : $.fn.colorbox.settings.transition = "fade"; //changes the transition to fade for all colorBox() events proceeding it's declaration. |
---|
| 291 | Example (Specific) : $("a[href='http://www.google.com']").colorbox({fixedWidth:"90%", fixedHeight:"450px", iframe:true}); |
---|
| 292 | */ |
---|
| 293 | $.fn.colorbox.settings = { |
---|
| 294 | transition : "elastic", // Transition types: "elastic", "fade", or "none". |
---|
| 295 | transitionSpeed : 350, // Sets the speed of the fade and elastic transitions, in milliseconds. |
---|
| 296 | initialWidth : "400", // Set the initial width of the modal, prior to any content being loaded. |
---|
| 297 | initialHeight : "400", // Set the initial height of the modal, prior to any content being loaded. |
---|
| 298 | fixedWidth : false, // Set a fixed width for div#loaded. Example: "500px" |
---|
| 299 | fixedHeight : false, // Set a fixed height for div#modalLoadedContent. Example: "500px" |
---|
| 300 | inline : false, // Set this to the selector of inline content to be displayed. Example "#myHiddenDiv" or "body p". |
---|
| 301 | iframe : false, // If 'true' specifies that content should be displayed in an iFrame. |
---|
| 302 | href : false, // This can be used as an alternate anchor URL for ColorBox to use, or can be used to assign a URL for non-anchor elments such as images or form buttons. |
---|
| 303 | title : false, // This can be used as an alternate anchor title. |
---|
| 304 | bgOpacity : 0.85, // The modalBackgroundOverlay opacity level. Range: 0 to 1. |
---|
| 305 | 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. |
---|
| 306 | contentCurrent : "image {current} of {total}", // the format of the contentCurrent information |
---|
| 307 | contentPrevious : "previous", // the anchor text for the previous link in a shared relation group (same values for 'rel'). |
---|
| 308 | contentNext : "next", // the anchor text for the next link in a shared relation group (same 'rel' attribute'). |
---|
| 309 | modalClose : "close", // the anchor text for the close link. Esc will also close the modal. |
---|
| 310 | open : false, //Automatically opens ColorBox. (fires the click.colorbox event without waiting for user input). |
---|
| 311 | overlayClose : true //If true, enables closing ColorBox by clicking on the background overlay. |
---|
| 312 | }; |
---|
| 313 | |
---|
| 314 | })(jQuery); |
---|
| 315 | |
---|