// ColorBox v1.3.6 - 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 = $.browser.msie && !$.support.opacity, // feature detection alone gave false positives in some browsers 13 isIE6 = isIE && $.browser.version < 7, 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: "zdjęcie {current} z {total}", 82 previous: "poprzednie", 83 next: "następne", 84 close: "zamknij", 85 open: FALSE, 86 overlayClose: TRUE, 87 88 slideshow: FALSE, 89 slideshowAuto: TRUE, 90 slideshowSpeed: 2500, 91 slideshowStart: "rozpocznij slideshow", 92 slideshowStop: "zakończ 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; 109 } 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); 116 } 117 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 settings.rel = settings.rel || element.rel; 126 settings.href = settings.href || element.href; 127 settings.title = settings.title || element.title; 128 } 129 130 function launch(elem) { 131 132 element = elem; 133 134 settings = $(element).data(colorbox); 135 136 process(); // Convert functions to their returned values. 137 138 if (settings.rel && settings.rel !== 'nofollow') { 139 $related = $('.cboxElement').filter(function () { 140 var relRelated = $(this).data(colorbox).rel || this.rel; 141 return (relRelated === settings.rel); 142 }); 143 index = $related.index(element); 144 145 // Check direct calls to ColorBox. 146 if (index < 0) { 147 $related = $related.add(element); 148 index = $related.length - 1; 149 } 150 } else { 151 $related = $(element); 152 index = 0; 153 } 154 155 if (!open) { 156 open = TRUE; 157 158 active = TRUE; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys. 159 160 bookmark = element; 161 162 bookmark.blur(); // Remove the focus from the calling element. 163 164 // Set Navigation Key Bindings 165 $(document).bind("keydown.cbox_close", function (e) { 166 if (e.keyCode === 27) { 167 e.preventDefault(); 168 cboxPublic.close(); 169 } 170 }).bind("keydown.cbox_arrows", function (e) { 171 if ($related.length > 1) { 172 if (e.keyCode === 37) { 173 e.preventDefault(); 174 $prev.click(); 175 } else if (e.keyCode === 39) { 176 e.preventDefault(); 177 $next.click(); 178 } 179 } 180 }); 181 182 if (settings.overlayClose) { 183 $overlay.css({"cursor": "pointer"}).one('click', cboxPublic.close); 184 } 185 186 $.event.trigger(cbox_open); 187 if (settings.onOpen) { 188 settings.onOpen.call(element); 189 } 190 191 $overlay.css({"opacity": settings.opacity}).show(); 192 193 // Opens inital empty ColorBox prior to content being loaded. 194 settings.w = setSize(settings.initialWidth, 'x'); 195 settings.h = setSize(settings.initialHeight, 'y'); 196 cboxPublic.position(0); 197 198 if (isIE6) { 199 $window.bind('resize.cboxie6 scroll.cboxie6', function () { 200 $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()}); 201 }).trigger("scroll.cboxie6"); 202 } 203 } 204 205 $current.add($prev).add($next).add($slideshow).add($title).hide(); 206 207 $close.html(settings.close).show(); 208 209 cboxPublic.slideshow(); 210 211 cboxPublic.load(); 212 } 213 214 // **************** 215 // PUBLIC FUNCTIONS 216 // Usage format: $.fn.colorbox.close(); 217 // Usage from within an iframe: parent.$.fn.colorbox.close(); 218 // **************** 219 220 cboxPublic = $.fn.colorbox = function (options, callback) { 221 var $this = this; 222 223 if (!$this.length) { 224 if ($this.selector === '') { // empty selector means a direct call, ie: $.fn.colorbox(); 225 $this = $(''); 226 options.open = TRUE; 227 } else { // else the selector didn't match anything, and colorbox should go ahead and return. 228 return this; 229 } 230 } 231 232 $this.each(function () { 233 var data = $.extend({}, $(this).data(colorbox) ? $(this).data(colorbox) : defaults, options); 234 235 $(this).data(colorbox, data).addClass("cboxElement"); 236 237 if (callback) { 238 $(this).data(colorbox).onComplete = callback; 239 } 240 }); 241 242 if (options && options.open) { 243 launch($this); 244 } 245 246 return this; 247 }; 248 249 // Initialize ColorBox: store common calculations, preload the interface graphics, append the html. 250 // This preps colorbox for a speedy open when clicked, and lightens the burdon on the browser by only 251 // having to run once, instead of each time colorbox is opened. 252 cboxPublic.init = function () { 253 254 // jQuery object generator to save a bit of space 255 function $div(id) { 256 return $('
'); 257 } 258 259 // Create & Append jQuery Objects 260 $window = $(window); 261 $cbox = $('
'); 262 $overlay = $div("Overlay").hide(); 263 $wrap = $div("Wrapper"); 264 $content = $div("Content").append( 265 $loaded = $div("LoadedContent").css({width: 0, height: 0}), 266 $loadingOverlay = $div("LoadingOverlay"), 267 $loadingGraphic = $div("LoadingGraphic"), 268 $title = $div("Title"), 269 $current = $div("Current"), 270 $slideshow = $div("Slideshow"), 271 $next = $div("Next"), 272 $prev = $div("Previous"), 273 $close = $div("Close") 274 ); 275 $wrap.append( // The 3x3 Grid that makes up ColorBox 276 $('
').append( 277 $div("TopLeft"), 278 $topBorder = $div("TopCenter"), 279 $div("TopRight") 280 ), 281 $('
').append( 282 $leftBorder = $div("MiddleLeft"), 283 $content, 284 $rightBorder = $div("MiddleRight") 285 ), 286 $('
').append( 287 $div("BottomLeft"), 288 $bottomBorder = $div("BottomCenter"), 289 $div("BottomRight") 290 ) 291 ).children().children().css({'float': 'left'}); 292 293 $loadingBay = $("
"); 294 295 $('body').prepend($overlay, $cbox.append($wrap, $loadingBay)); 296 297 if (isIE) { 298 $cbox.addClass('cboxIE'); 299 if (isIE6) { 300 $overlay.css('position', 'absolute'); 301 } 302 } 303 304 // Add rollover event to navigation elements 305 $content.children() 306 .bind('mouseover mouseout', function(){ 307 $(this).toggleClass(hover); 308 }).addClass(hover); 309 310 // Cache values needed for size calculations 311 interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(TRUE) - $content.height();//Subtraction needed for IE6 312 interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(TRUE) - $content.width(); 313 loadedHeight = $loaded.outerHeight(TRUE); 314 loadedWidth = $loaded.outerWidth(TRUE); 315 316 // Setting padding to remove the need to do size conversions during the animation step. 317 $cbox.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}).hide(); 318 319 // Setup button & key events. 320 $next.click(cboxPublic.next); 321 $prev.click(cboxPublic.prev); 322 $close.click(cboxPublic.close); 323 324 // Adding the 'hover' class allowed the browser to load the hover-state 325 // background graphics. The class can now can be removed. 326 $content.children().removeClass(hover); 327 328 $('.cboxElement').live('click', function (e) { 329 if (e.button !== 0 && typeof e.button !== 'undefined') {// checks to see if it was a non-left mouse-click. 330 return TRUE; 331 } else { 332 launch(this); 333 return FALSE; 334 } 335 }); 336 }; 337 338 cboxPublic.position = function (speed, loadedCallback) { 339 var 340 animate_speed, 341 winHeight = $window.height(), 342 // keeps the top and left positions within the browser's viewport. 343 posTop = Math.max(winHeight - settings.h - loadedHeight - interfaceHeight,0)/2 + $window.scrollTop(), 344 posLeft = Math.max(document.documentElement.clientWidth - settings.w - loadedWidth - interfaceWidth,0)/2 + $window.scrollLeft(); 345 346 // setting the speed to 0 to reduce the delay between same-sized content. 347 animate_speed = ($cbox.width() === settings.w+loadedWidth && $cbox.height() === settings.h+loadedHeight) ? 0 : speed; 348 349 // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly, 350 // but it has to be shrank down around the size of div#colorbox when it's done. If not, 351 // it can invoke an obscure IE bug when using iframes. 352 $wrap[0].style.width = $wrap[0].style.height = "9999px"; 353 354 function modalDimensions (that) { 355 // loading overlay size has to be sure that IE6 uses the correct height. 356 $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width; 357 $loadingGraphic[0].style.height = $loadingOverlay[0].style.height = $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height; 358 } 359 360 $cbox.dequeue().animate({width:settings.w+loadedWidth, height:settings.h+loadedHeight, top:posTop, left:posLeft}, {duration: animate_speed, 361 complete: function(){ 362 modalDimensions(this); 363 364 active = FALSE; 365 366 // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation. 367 $wrap[0].style.width = (settings.w+loadedWidth+interfaceWidth) + "px"; 368 $wrap[0].style.height = (settings.h+loadedHeight+interfaceHeight) + "px"; 369 370 if (loadedCallback) {loadedCallback();} 371 }, 372 step: function(){ 373 modalDimensions(this); 374 } 375 }); 376 }; 377 378 cboxPublic.resize = function (object) { 379 if(!open){ return; } 380 381 var topMargin, 382 prev, 383 prevSrc, 384 next, 385 nextSrc, 386 photo, 387 timeout, 388 speed = settings.transition==="none" ? 0 : settings.speed; 389 390 $window.unbind(cbox_resize); 391 392 if(!object){ 393 timeout = setTimeout(function(){ // timer allows IE to render the dimensions before attempting to calculate the height 394 var $child = $loaded.wrapInner("
").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be. 395 settings.h = $child.height(); 396 $loaded.css({height:settings.h}); 397 $child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation 398 cboxPublic.position(speed); 399 }, 1); 400 return; 401 } 402 403 $loaded.remove(); 404 $loaded = $('
').html(object); 405 406 function getWidth(){ 407 settings.w = settings.w || $loaded.width(); 408 settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w; 409 return settings.w; 410 } 411 function getHeight(){ 412 settings.h = settings.h || $loaded.height(); 413 settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h; 414 return settings.h; 415 } 416 417 $loaded.hide() 418 .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. 419 .css({width:getWidth(), overflow:settings.scrolling ? 'auto' : 'hidden'}) 420 .css({height:getHeight()})// sets the height independently from the width in case the new width influences the value of height. 421 .prependTo($content); 422 423 $('#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. 424 425 // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay. 426 if (isIE6) { 427 $('select:not(#colorbox select)').filter(function(){ 428 return this.style.visibility !== 'hidden'; 429 }).css({'visibility':'hidden'}).one(cbox_cleanup, function(){ 430 this.style.visibility = 'inherit'; 431 }); 432 } 433 434 function setPosition (s) { 435 cboxPublic.position(s, function(){ 436 if (!open) { return; } 437 438 if (isIE) { 439 //This fadeIn helps the bicubic resampling to kick-in. 440 if( photo ){$loaded.fadeIn(100);} 441 //IE adds a filter when ColorBox fades in and out that can cause problems if the loaded content contains transparent pngs. 442 $cbox[0].style.removeAttribute("filter"); 443 } 444 445 //Waited until the iframe is added to the DOM & it is visible before setting the src. 446 //This increases compatability with pages using DOM dependent JavaScript. 447 if(settings.iframe){ 448 $loaded.append("