Changeset 4621 for extensions/lightbox/jquery.colorbox.js
- Timestamp:
- Jan 4, 2010, 7:32:52 PM (14 years ago)
- Location:
- extensions/lightbox
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
extensions/lightbox
-
Property
svn:ignore
set to
colorbox
-
Property
svn:ignore
set to
-
extensions/lightbox/jquery.colorbox.js
r3298 r4621 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(); 1 // ColorBox v1.3.5 - a full featured, light-weight, customizable lightbox based on jQuery 1.3 2 // c) 2009 Jack Moore - www.colorpowered.com - jack@colorpowered.com 3 // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 4 5 (function ($) { 6 // Shortcuts (to increase compression) 7 var colorbox = 'colorbox', 8 hover = 'hover', 9 TRUE = true, 10 FALSE = false, 11 cboxPublic, 12 isIE = !$.support.opacity, 13 isIE6 = isIE && !window.XMLHttpRequest, 14 15 // Event Strings (to increase compression) 16 cbox_open = 'cbox_open', 17 cbox_load = 'cbox_load', 18 cbox_complete = 'cbox_complete', 19 cbox_cleanup = 'cbox_cleanup', 20 cbox_closed = 'cbox_closed', 21 cbox_resize = 'resize.cbox_resize', 22 23 // Cached jQuery Object Variables 24 $overlay, 25 $cbox, 26 $wrap, 27 $content, 28 $topBorder, 29 $leftBorder, 30 $rightBorder, 31 $bottomBorder, 32 $related, 33 $window, 34 $loaded, 35 $loadingBay, 36 $loadingOverlay, 37 $loadingGraphic, 38 $title, 39 $current, 40 $slideshow, 41 $next, 42 $prev, 43 $close, 44 45 // Variables for cached values or use across multiple functions 46 interfaceHeight, 47 interfaceWidth, 48 loadedHeight, 49 loadedWidth, 50 element, 51 bookmark, 52 index, 53 settings, 54 open, 55 active, 56 57 // ColorBox Default Settings. 58 // See http://colorpowered.com/colorbox for details. 59 defaults = { 60 transition: "elastic", 61 speed: 350, 62 width: FALSE, 63 height: FALSE, 64 innerWidth: FALSE, 65 innerHeight: FALSE, 66 initialWidth: "400", 67 initialHeight: "400", 68 maxWidth: FALSE, 69 maxHeight: FALSE, 70 scalePhotos: TRUE, 71 scrolling: TRUE, 72 inline: FALSE, 73 html: FALSE, 74 iframe: FALSE, 75 photo: FALSE, 76 href: FALSE, 77 title: FALSE, 78 rel: FALSE, 79 opacity: 0.9, 80 preloading: TRUE, 81 current: "image {current} of {total}", 82 previous: "previous", 83 next: "next", 84 close: "close", 85 open: FALSE, 86 overlayClose: TRUE, 87 88 slideshow: FALSE, 89 slideshowAuto: TRUE, 90 slideshowSpeed: 2500, 91 slideshowStart: "start slideshow", 92 slideshowStop: "stop slideshow", 93 94 onOpen: FALSE, 95 onLoad: FALSE, 96 onComplete: FALSE, 97 onCleanup: FALSE, 98 onClosed: FALSE 99 }; 100 101 // **************** 102 // HELPER FUNCTIONS 103 // **************** 104 105 // Convert % values to pixels 106 function setSize(size, dimension) { 107 dimension = dimension === 'x' ? $window.width() : $window.height();//document.documentElement.clientWidth : document.documentElement.clientHeight; 108 return (typeof size === 'string') ? Math.round((size.match(/%/) ? (dimension / 100) * parseInt(size, 10) : parseInt(size, 10))) : size; 23 109 } 24 } 25 function clearLoading(){ 26 if($("#colorboxInlineTemp").length > 0){ 27 $loaded.children().insertAfter("#colorboxInlineTemp"); 110 111 // Checks an href to see if it is a photo. 112 // There is a force photo option (photo: true) for hrefs that cannot be matched by this regex. 113 function isImage(url) { 114 url = $.isFunction(url) ? url.call(element) : url; 115 return settings.photo || url.match(/\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i); 28 116 } 29 if(loadingElement){$(loadingElement).remove();}30 }31 32 // Convert % values to pixels33 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 only40 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 IE678 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 117 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;} 118 // Assigns functions results to their respective settings. This allows functions to be used to set ColorBox options. 119 function process() { 120 for (var i in settings) { 121 if ($.isFunction(settings[i]) && i.substring(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time. 122 settings[i] = settings[i].call(element); 123 } 124 } 125 } 126 127 function launch(elem) { 128 129 element = elem; 130 131 settings = $(element).data(colorbox); 132 133 process(); // Convert functions to their returned values. 134 135 var rel = settings.rel || element.rel; 136 137 if (rel && rel !== 'nofollow') { 138 $related = $('.cboxElement').filter(function () { 139 var relRelated = $(this).data(colorbox).rel || this.rel; 140 return (relRelated === rel); 141 }); 142 index = $related.index(element); 143 144 // Check direct calls to ColorBox. 145 if (index < 0) { 146 $related = $related.add(element); 147 index = $related.length - 1; 148 } 149 } else { 150 $related = $(element); 151 index = 0; 152 } 153 154 if (!open) { 155 open = TRUE; 156 157 active = TRUE; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. 158 159 bookmark = element; 160 161 bookmark.blur(); // Remove the focus from the calling element. 162 163 // Set Navigation Key Bindings 164 $().bind("keydown.cbox_close", function (e) { 165 if (e.keyCode === 27) { 166 e.preventDefault(); 167 cboxPublic.close(); 168 } 169 }).bind("keydown.cbox_arrows", function (e) { 170 if ($related.length > 1) { 171 if (e.keyCode === 37) { 172 e.preventDefault(); 173 $prev.click(); 174 } else if (e.keyCode === 39) { 175 e.preventDefault(); 176 $next.click(); 177 } 178 } 179 }); 180 181 if (settings.overlayClose) { 182 $overlay.css({"cursor": "pointer"}).one('click', cboxPublic.close); 183 } 184 185 $.event.trigger(cbox_open); 186 if (settings.onOpen) { 187 settings.onOpen.call(element); 188 } 189 190 $overlay.css({"opacity": settings.opacity}).show(); 191 192 // Opens inital empty ColorBox prior to content being loaded. 193 settings.w = setSize(settings.initialWidth, 'x'); 194 settings.h = setSize(settings.initialHeight, 'y'); 195 cboxPublic.position(0); 196 197 if (isIE6) { 198 $window.bind('resize.cboxie6 scroll.cboxie6', function () { 199 $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()}); 200 }).trigger("scroll.cboxie6"); 201 } 202 } 203 204 $current.add($prev).add($next).add($slideshow).add($title).hide(); 205 206 $close.html(settings.close).show(); 207 208 cboxPublic.slideshow(); 209 210 cboxPublic.load(); 211 } 212 213 // **************** 214 // PUBLIC FUNCTIONS 215 // Usage format: $.fn.colorbox.close(); 216 // Usage from within an iframe: parent.$.fn.colorbox.close(); 217 // **************** 102 218 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, 219 cboxPublic = $.fn.colorbox = function (options, callback) { 220 var $this = this; 221 222 if (!$this.length) { 223 if ($this.selector === '') { // empty selector means a direct call, ie: $.fn.colorbox(); 224 $this = $($this); 225 options.open = TRUE; 226 } else { // else the selector didn't match anything, and colorbox should go ahead and return. 227 return this; 228 } 229 } 230 231 $this.each(function () { 232 var data = $.extend({}, $(this).data(colorbox) ? $(this).data(colorbox) : defaults, options); 233 234 $(this).data(colorbox, data).addClass("cboxElement"); 235 236 if (callback) { 237 $(this).data(colorbox).onComplete = callback; 238 } 239 }); 240 241 if (options && options.open) { 242 launch($this); 243 } 244 245 return this; 246 }; 247 248 // Initialize ColorBox: store common calculations, preload the interface graphics, append the html. 249 // This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only 250 // having to run once, instead of each time colorbox is opened. 251 cboxPublic.init = function () { 252 253 // jQuery object generator to save a bit of space 254 function $div(id) { 255 return $('<div id="cbox' + id + '"/>'); 256 } 257 258 // Create & Append jQuery Objects 259 $window = $(window); 260 $cbox = $('<div id="colorbox"/>'); 261 $overlay = $div("Overlay").hide(); 262 $wrap = $div("Wrapper"); 263 $content = $div("Content").append( 264 $loaded = $div("LoadedContent").css({width: 0, height: 0}), 265 $loadingOverlay = $div("LoadingOverlay"), 266 $loadingGraphic = $div("LoadingGraphic"), 267 $title = $div("Title"), 268 $current = $div("Current"), 269 $slideshow = $div("Slideshow"), 270 $next = $div("Next"), 271 $prev = $div("Previous"), 272 $close = $div("Close") 273 ); 274 $wrap.append( // The 3x3 Grid that makes up ColorBox 275 $('<div/>').append( 276 $div("TopLeft"), 277 $topBorder = $div("TopCenter"), 278 $div("TopRight") 279 ), 280 $('<div/>').append( 281 $leftBorder = $div("MiddleLeft"), 282 $content, 283 $rightBorder = $div("MiddleRight") 284 ), 285 $('<div/>').append( 286 $div("BottomLeft"), 287 $bottomBorder = $div("BottomCenter"), 288 $div("BottomRight") 289 ) 290 ).children().children().css({'float': 'left'}); 291 292 $loadingBay = $("<div style='position:absolute; top:0; left:0; width:9999px; height:0;'/>"); 293 294 $('body').prepend($overlay, $cbox.append($wrap, $loadingBay)); 295 296 if (isIE) { 297 $cbox.addClass('cboxIE'); 298 if (isIE6) { 299 $overlay.css('position', 'absolute'); 300 } 301 } 302 303 // Add rollover event to navigation elements 304 $content.children() 305 .addClass(hover) 306 .mouseover(function () { $(this).addClass(hover); }) 307 .mouseout(function () { $(this).removeClass(hover); }); 308 309 // Cache values needed for size calculations 310 interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(TRUE) - $content.height();//Subtraction needed for IE6 311 interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(TRUE) - $content.width(); 312 loadedHeight = $loaded.outerHeight(TRUE); 313 loadedWidth = $loaded.outerWidth(TRUE); 314 315 // Setting padding to remove the need to do size conversions during the animation step. 316 $cbox.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}).hide(); 317 318 // Setup button & key events. 319 $next.click(cboxPublic.next); 320 $prev.click(cboxPublic.prev); 321 $close.click(cboxPublic.close); 322 323 // Adding the 'hover' class allowed the browser to load the hover-state 324 // background graphics. The class can now can be removed. 325 $content.children().removeClass(hover); 326 327 $('.cboxElement').live('click', function (e) { 328 if (e.button !== 0 && typeof e.button !== 'undefined') {// checks to see if it was a non-left mouse-click. 329 return TRUE; 330 } else { 331 launch(this); 332 return FALSE; 333 } 334 }); 335 }; 336 337 cboxPublic.position = function (speed, loadedCallback) { 338 var 339 animate_speed, 340 winHeight = $window.height(), 341 // keeps the top and left positions within the browser's viewport. 342 posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2 + $window.scrollTop(), 343 posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft(); 344 345 // setting the speed to 0 to reduce the delay between same-sized content. 346 animate_speed = ($cbox.width() === settings.w+loadedWidth && $cbox.height() === settings.h+loadedHeight) ? 0 : speed; 347 348 // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly, 349 // but it has to be shrank down around the size of div#colorbox when it's done. If not, 350 // it can invoke an obscure IE bug when using iframes. 351 $wrap[0].style.width = $wrap[0].style.height = "9999px"; 352 353 function modalDimensions (that) { 354 // loading overlay size has to be sure that IE6 uses the correct height. 355 $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width; 356 $loadingGraphic[0].style.height = $loadingOverlay[0].style.height = $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height; 357 } 358 359 $cbox.dequeue().animate({width:settings.w+loadedWidth, height:settings.h+loadedHeight, top:posTop, left:posLeft}, {duration: animate_speed, 115 360 complete: function(){ 361 modalDimensions(this); 362 363 active = FALSE; 364 365 // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation. 366 $wrap[0].style.width = (settings.w+loadedWidth+interfaceWidth) + "px"; 367 $wrap[0].style.height = (settings.h+loadedHeight+interfaceHeight) + "px"; 368 116 369 if (loadedCallback) {loadedCallback();} 117 modalDimensions(this);118 if ($.browser.msie && $.browser.version < 7) {setModalOverlay();}119 370 }, 120 371 step: function(){ 121 modalDimensions(this); 372 modalDimensions(this); 122 373 } 123 374 }); 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 } 375 }; 376 377 cboxPublic.resize = function (object) { 378 if(!open){ return; } 379 380 var topMargin, 381 prev, 382 prevSrc, 383 next, 384 nextSrc, 385 photo, 386 timeout, 387 speed = settings.transition==="none" ? 0 : settings.speed; 388 389 $window.unbind(cbox_resize); 390 391 if(!object){ 392 timeout = setTimeout(function(){ // timer allows IE to render the dimensions before attempting to calculate the height 393 var $child = $loaded.wrapInner("<div style='overflow:auto'></div>").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be. 394 settings.h = $child.height(); 395 $loaded.css({height:settings.h}); 396 $child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation 397 cboxPublic.position(speed); 398 }, 1); 399 return; 400 } 401 402 $loaded.remove(); 403 $loaded = $('<div id="cboxLoadedContent"/>').html(object); 404 405 function getWidth(){ 406 settings.w = settings.w || $loaded.width(); 407 settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w; 408 return settings.w; 409 } 410 function getHeight(){ 411 settings.h = settings.h || $loaded.height(); 412 settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h; 413 return settings.h; 414 } 415 416 $loaded.hide() 417 .appendTo($loadingBay)// content has to be appended to the DOM for accurate size calculations. Appended to an absolutely positioned element, rather than BODY, which avoids an extremely brief display of the vertical scrollbar in Firefox that can occur for a small minority of websites. 418 .css({width:getWidth(), overflow:settings.scrolling ? 'auto' : 'hidden'}) 419 .css({height:getHeight()})// sets the height independently from the width in case the new width influences the value of height. 420 .prependTo($content); 421 422 $('#cboxPhoto').css({cssFloat:'none'});// floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width. 423 424 // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay. 425 if (isIE6) { 426 $('select:not(#colorbox select)').filter(function(){ 427 return this.style.visibility !== 'hidden'; 428 }).css({'visibility':'hidden'}).one(cbox_cleanup, function(){ 429 this.style.visibility = 'inherit'; 430 }); 431 } 432 433 function setPosition (s) { 434 cboxPublic.position(s, function(){ 435 if (!open) { return; } 436 437 if (isIE) { 438 //This fadeIn helps the bicubic resampling to kick-in. 439 if( photo ){$loaded.fadeIn(100);} 440 //IE adds a filter when ColorBox fades in and out that can cause problems if the loaded content contains transparent pngs. 441 $cbox[0].style.removeAttribute("filter"); 442 } 443 444 //Waited until the iframe is added to the DOM & it is visible before setting the src. 445 //This increases compatability with pages using DOM dependent JavaScript. 446 if(settings.iframe){ 447 $loaded.append("<iframe id='cboxIframe'" + (settings.scrolling ? " " : "scrolling='no'") + " name='iframe_"+new Date().getTime()+"' frameborder=0 src='"+(settings.href || element.href)+"' " + (isIE ? "allowtransparency='true'" : '') + " />"); 448 } 449 450 $loaded.show(); 451 452 $title.html(settings.title || element.title); 453 454 $title.show(); 455 456 if ($related.length>1) { 457 $current.html(settings.current.replace(/\{current\}/, index+1).replace(/\{total\}/, $related.length)).show(); 458 $next.html(settings.next).show(); 459 $prev.html(settings.previous).show(); 460 461 if(settings.slideshow){ 462 $slideshow.show(); 463 } 464 } 465 466 $loadingOverlay.hide(); 467 $loadingGraphic.hide(); 468 469 $.event.trigger(cbox_complete); 470 if (settings.onComplete) { 471 settings.onComplete.call(element); 472 } 473 474 if (settings.transition === 'fade'){ 475 $cbox.fadeTo(speed, 1, function(){ 476 if(isIE){$cbox[0].style.removeAttribute("filter");} 477 }); 478 } 479 480 $window.bind(cbox_resize, function(){ 481 cboxPublic.position(0); 482 }); 483 }); 484 } 485 486 if((settings.transition === 'fade' && $cbox.fadeTo(speed, 0, function(){setPosition(0);})) || setPosition(speed)){} 487 488 // Preloads images within a rel group 489 if (settings.preloading && $related.length>1) { 490 prev = index > 0 ? $related[index-1] : $related[$related.length-1]; 491 next = index < $related.length-1 ? $related[index+1] : $related[0]; 492 nextSrc = $(next).data(colorbox).href || next.href; 493 prevSrc = $(prev).data(colorbox).href || prev.href; 494 495 if(isImage(nextSrc)){ 496 $('<img />').attr('src', nextSrc); 497 } 498 499 if(isImage(prevSrc)){ 500 $('<img />').attr('src', prevSrc); 501 } 502 } 503 }; 504 505 cboxPublic.load = function () { 506 var href, img, setResize, resize = cboxPublic.resize; 507 508 active = TRUE; 509 510 /* 511 512 // I decided to comment this out because I can see it causing problems as users 513 // really should just set the dimensions on their IMG elements instead, 514 // but I'm leaving the code in as it may be useful to someone. 515 // To use, uncomment the function and change 'if(textStatus === "success"){ resize(this); }' 516 // to 'if(textStatus === "success"){ preload(this); }' 517 518 // Preload loops through the HTML to find IMG elements and loads their sources. 519 // This allows the resize method to accurately estimate the dimensions of the new content. 520 function preload(html){ 521 var 522 $ajax = $(html), 523 $imgs = $ajax.find('img'), 524 x = $imgs.length; 525 526 function loadloop(){ 527 var img = new Image(); 528 x = x-1; 529 if(x >= 0){ 530 img.onload = loadloop; 531 img.src = $imgs[x].src; 532 } else { 533 resize($ajax); 534 } 535 } 536 537 loadloop(); 538 } 539 */ 540 541 element = $related[index]; 542 543 settings = $(element).data(colorbox); 544 545 //convert functions to static values 546 process(); 547 548 $.event.trigger(cbox_load); 549 if (settings.onLoad) { 550 settings.onLoad.call(element); 551 } 552 553 // Evaluate the height based on the optional height and width settings. 554 settings.h = settings.height ? 555 setSize(settings.height, 'y') - loadedHeight - interfaceHeight : 556 settings.innerHeight ? 557 setSize(settings.innerHeight, 'y') : 558 FALSE; 559 settings.w = settings.width ? 560 setSize(settings.width, 'x') - loadedWidth - interfaceWidth : 561 settings.innerWidth ? 562 setSize(settings.innerWidth, 'x') : 563 FALSE; 564 565 // Sets the minimum dimensions for use in image scaling 566 settings.mw = settings.w; 567 settings.mh = settings.h; 568 569 // Re-evaluate the minimum width and height based on maxWidth and maxHeight values. 570 // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead. 571 if(settings.maxWidth){ 572 settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth; 573 settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw; 574 } 575 if(settings.maxHeight){ 576 settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight; 577 settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh; 578 } 579 580 href = settings.href || $(element).attr("href"); 581 582 $loadingOverlay.show(); 583 $loadingGraphic.show(); 584 585 if (settings.inline) { 586 // Inserts an empty placeholder where inline content is being pulled from. 587 // An event is bound to put inline content back when ColorBox closes or loads new content. 588 $('<div id="cboxInlineTemp" />').hide().insertBefore($(href)[0]).bind(cbox_load+' '+cbox_cleanup, function(){ 589 $(this).replaceWith($loaded.children()); 590 }); 591 resize($(href)); 592 } else if (settings.iframe) { 593 // IFrame element won't be added to the DOM until it is ready to be displayed, 594 // to avoid problems with DOM-ready JS that might be trying to run in that iframe. 595 resize(" "); 596 } else if (settings.html) { 597 resize(settings.html); 598 } else if (isImage(href)){ 599 img = new Image(); 600 img.onload = function(){ 601 var percent; 602 603 img.onload = null; 604 605 img.id = 'cboxPhoto'; 606 607 $(img).css({margin:'auto', border:'none', display:'block', cssFloat:'left'}); 608 609 if(settings.scalePhotos){ 610 setResize = function(){ 611 img.height -= img.height * percent; 612 img.width -= img.width * percent; 613 }; 614 if(settings.mw && img.width > settings.mw){ 615 percent = (img.width - settings.mw) / img.width; 616 setResize(); 617 } 618 if(settings.mh && img.height > settings.mh){ 619 percent = (img.height - settings.mh) / img.height; 620 setResize(); 621 } 622 } 623 624 if (settings.h) { 625 img.style.marginTop = Math.max(settings.h - img.height,0)/2 + 'px'; 626 } 627 628 resize(img); 629 630 if($related.length > 1){ 631 $(img).css({cursor:'pointer'}).click(cboxPublic.next); 632 } 633 634 if(isIE){ 635 img.style.msInterpolationMode='bicubic'; 636 } 637 }; 638 img.src = href; 639 } else { 640 $('<div />').appendTo($loadingBay).load(href, function(data, textStatus){ 641 if(textStatus === "success"){ 642 resize(this); 643 } else { 644 resize($("<p>Request unsuccessful.</p>")); 645 } 646 }); 647 } 648 }; 649 650 // Navigates to the next page/image in a set. 651 cboxPublic.next = function () { 652 if(!active){ 653 index = index < $related.length-1 ? index+1 : 0; 654 cboxPublic.load(); 655 } 656 }; 135 657 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; 658 cboxPublic.prev = function () { 659 if(!active){ 660 index = index > 0 ? index-1 : $related.length-1; 661 cboxPublic.load(); 662 } 663 }; 664 665 cboxPublic.slideshow = function () { 666 var stop, timeOut, className = 'cboxSlideshow_'; 667 668 $slideshow.bind(cbox_closed, function(){ 669 $slideshow.unbind(); 670 clearTimeout(timeOut); 671 $cbox.removeClass(className+"off"+" "+className+"on"); 672 }); 673 674 function start(){ 675 $slideshow 676 .text(settings.slideshowStop) 677 .bind(cbox_complete, function(){ 678 timeOut = setTimeout(cboxPublic.next, settings.slideshowSpeed); 679 }) 680 .bind(cbox_load, function(){ 681 clearTimeout(timeOut); 682 }).one("click", function(){ 683 stop(); 684 $(this).removeClass(hover); 181 685 }); 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 } 686 $cbox.removeClass(className+"off").addClass(className+"on"); 687 } 688 689 stop = function(){ 690 clearTimeout(timeOut); 691 $slideshow 692 .text(settings.slideshowStart) 693 .unbind(cbox_complete+' '+cbox_load) 694 .one("click", function(){ 695 start(); 696 timeOut = setTimeout(cboxPublic.next, settings.slideshowSpeed); 697 $(this).removeClass(hover); 222 698 }); 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 699 $cbox.removeClass(className+"on").addClass(className+"off"); 700 }; 701 702 if(settings.slideshow && $related.length>1){ 703 if(settings.slideshowAuto){ 704 start(); 705 } else { 706 stop(); 707 } 708 } 709 }; 710 711 // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close(); 712 cboxPublic.close = function () { 713 714 $.event.trigger(cbox_cleanup); 715 if (settings.onCleanup) { 716 settings.onCleanup.call(element); 717 } 718 719 open = FALSE; 720 $().unbind("keydown.cbox_close keydown.cbox_arrows"); 721 $window.unbind(cbox_resize+' resize.cboxie6 scroll.cboxie6'); 722 $overlay.css({cursor: 'auto'}).fadeOut('fast'); 723 724 $cbox 725 .stop(TRUE, FALSE) 726 .fadeOut('fast', function () { 727 $loaded.remove(); 728 $cbox.css({'opacity': 1}); 729 730 try{ 731 bookmark.focus(); 732 } catch (er){ 733 // do nothing 734 } 735 736 $.event.trigger(cbox_closed); 737 if (settings.onClosed) { 738 settings.onClosed.call(element); 739 } 740 }); 741 }; 742 743 // A method for fetching the current element ColorBox is referencing. 744 // returns a jQuery object. 745 cboxPublic.element = function(){ return $(element); }; 746 747 cboxPublic.settings = defaults; 748 749 // Initializes ColorBox when the DOM has loaded 750 $(cboxPublic.init); 751 752 }(jQuery));
Note: See TracChangeset
for help on using the changeset viewer.