library/colorbox/jquery.colorbox.js

   1 /*!
   2         Colorbox 1.6.3
   3         license: MIT
   4         http://www.jacklmoore.com/colorbox
   5 */
   6 (function ($, document, window) {
   7         var
   8         // Default settings object.
   9         // See http://jacklmoore.com/colorbox for details.
  10         defaults = {
  11                 // data sources
  12                 html: false,
  13                 photo: false,
  14                 iframe: false,
  15                 inline: false,
  16
  17                 // behavior and appearance
  18                 transition: "elastic",
  19                 speed: 300,
  20                 fadeOut: 300,
  21                 width: false,
  22                 initialWidth: "600",
  23                 innerWidth: false,
  24                 maxWidth: false,
  25                 height: false,
  26                 initialHeight: "450",
  27                 innerHeight: false,
  28                 maxHeight: false,
  29                 scalePhotos: true,
  30                 scrolling: true,
  31                 opacity: 0.9,
  32                 preloading: true,
  33                 className: false,
  34                 overlayClose: true,
  35                 escKey: true,
  36                 arrowKey: true,
  37                 top: false,
  38                 bottom: false,
  39                 left: false,
  40                 right: false,
  41                 fixed: false,
  42                 data: undefined,
  43                 closeButton: true,
  44                 fastIframe: true,
  45                 open: false,
  46                 reposition: true,
  47                 loop: true,
  48                 slideshow: false,
  49                 slideshowAuto: true,
  50                 slideshowSpeed: 2500,
  51                 slideshowStart: "start slideshow",
  52                 slideshowStop: "stop slideshow",
  53                 photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico|webp|jxr|svg)((#|\?).*)?$/i,
  54
  55                 // alternate image paths for high-res displays
  56                 retinaImage: false,
  57                 retinaUrl: false,
  58                 retinaSuffix: '@2x.$1',
  59
  60                 // internationalization
  61                 current: "image {current} of {total}",
  62                 previous: "previous",
  63                 next: "next",
  64                 close: "close",
  65                 xhrError: "This content failed to load.",
  66                 imgError: "This image failed to load.",
  67
  68                 // accessbility
  69                 returnFocus: true,
  70                 trapFocus: true,
  71
  72                 // callbacks
  73                 onOpen: false,
  74                 onLoad: false,
  75                 onComplete: false,
  76                 onCleanup: false,
  77                 onClosed: false,
  78
  79                 rel: function() {
  80                         return this.rel;
  81                 },
  82                 href: function() {
  83                         // using this.href would give the absolute url, when the href may have been inteded as a selector (e.g. '#container')
  84                         return $(this).attr('href');
  85                 },
  86                 title: function() {
  87                         return this.title;
  88                 },
  89                 createImg: function() {
  90                         var img = new Image();
  91                         var attrs = $(this).data('cbox-img-attrs');
  92
  93                         if (typeof attrs === 'object') {
  94                                 $.each(attrs, function(key, val){
  95                                         img[key] = val;
  96                                 });
  97                         }
  98
  99                         return img;
 100                 },
 101                 createIframe: function() {
 102                         var iframe = document.createElement('iframe');
 103                         var attrs = $(this).data('cbox-iframe-attrs');
 104
 105                         if (typeof attrs === 'object') {
 106                                 $.each(attrs, function(key, val){
 107                                         iframe[key] = val;
 108                                 });
 109                         }
 110
 111                         if ('frameBorder' in iframe) {
 112                                 iframe.frameBorder = 0;
 113                         }
 114                         if ('allowTransparency' in iframe) {
 115                                 iframe.allowTransparency = "true";
 116                         }
 117                         iframe.name = (new Date()).getTime(); // give the iframe a unique name to prevent caching
 118                         iframe.allowFullscreen = true;
 119
 120                         return iframe;
 121                 }
 122         },
 123
 124         // Abstracting the HTML and event identifiers for easy rebranding
 125         colorbox = 'colorbox',
 126         prefix = 'cbox',
 127         boxElement = prefix + 'Element',
 128
 129         // Events
 130         event_open = prefix + '_open',
 131         event_load = prefix + '_load',
 132         event_complete = prefix + '_complete',
 133         event_cleanup = prefix + '_cleanup',
 134         event_closed = prefix + '_closed',
 135         event_purge = prefix + '_purge',
 136
 137         // Cached jQuery Object Variables
 138         $overlay,
 139         $box,
 140         $wrap,
 141         $content,
 142         $topBorder,
 143         $leftBorder,
 144         $rightBorder,
 145         $bottomBorder,
 146         $related,
 147         $window,
 148         $loaded,
 149         $loadingBay,
 150         $loadingOverlay,
 151         $title,
 152         $current,
 153         $slideshow,
 154         $next,
 155         $prev,
 156         $close,
 157         $groupControls,
 158         $events = $('<a/>'), // $({}) would be prefered, but there is an issue with jQuery 1.4.2
 159
 160         // Variables for cached values or use across multiple functions
 161         settings,
 162         interfaceHeight,
 163         interfaceWidth,
 164         loadedHeight,
 165         loadedWidth,
 166         index,
 167         photo,
 168         open,
 169         active,
 170         closing,
 171         loadingTimer,
 172         publicMethod,
 173         div = "div",
 174         requests = 0,
 175         previousCSS = {},
 176         init;
 177
 178         // ****************
 179         // HELPER FUNCTIONS
 180         // ****************
 181
 182         // Convenience function for creating new jQuery objects
 183         function $tag(tag, id, css) {
 184                 var element = document.createElement(tag);
 185
 186                 if (id) {
 187                         element.id = prefix + id;
 188                 }
 189
 190                 if (css) {
 191                         element.style.cssText = css;
 192                 }
 193
 194                 return $(element);
 195         }
 196
 197         // Get the window height using innerHeight when available to avoid an issue with iOS
 198         // http://bugs.jquery.com/ticket/6724
 199         function winheight() {
 200                 return window.innerHeight ? window.innerHeight : $(window).height();
 201         }
 202
 203         function Settings(element, options) {
 204                 if (options !== Object(options)) {
 205                         options = {};
 206                 }
 207
 208                 this.cache = {};
 209                 this.el = element;
 210
 211                 this.value = function(key) {
 212                         var dataAttr;
 213
 214                         if (this.cache[key] === undefined) {
 215                                 dataAttr = $(this.el).attr('data-cbox-'+key);
 216
 217                                 if (dataAttr !== undefined) {
 218                                         this.cache[key] = dataAttr;
 219                                 } else if (options[key] !== undefined) {
 220                                         this.cache[key] = options[key];
 221                                 } else if (defaults[key] !== undefined) {
 222                                         this.cache[key] = defaults[key];
 223                                 }
 224                         }
 225
 226                         return this.cache[key];
 227                 };
 228
 229                 this.get = function(key) {
 230                         var value = this.value(key);
 231                         return $.isFunction(value) ? value.call(this.el, this) : value;
 232                 };
 233         }
 234
 235         // Determine the next and previous members in a group.
 236         function getIndex(increment) {
 237                 var
 238                 max = $related.length,
 239                 newIndex = (index + increment) % max;
 240
 241                 return (newIndex < 0) ? max + newIndex : newIndex;
 242         }
 243
 244         // Convert '%' and 'px' values to integers
 245         function setSize(size, dimension) {
 246                 return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10));
 247         }
 248
 249         // Checks an href to see if it is a photo.
 250         // There is a force photo option (photo: true) for hrefs that cannot be matched by the regex.
 251         function isImage(settings, url) {
 252                 return settings.get('photo') || settings.get('photoRegex').test(url);
 253         }
 254
 255         function retinaUrl(settings, url) {
 256                 return settings.get('retinaUrl') && window.devicePixelRatio > 1 ? url.replace(settings.get('photoRegex'), settings.get('retinaSuffix')) : url;
 257         }
 258
 259         function trapFocus(e) {
 260                 if ('contains' in $box[0] && !$box[0].contains(e.target) && e.target !== $overlay[0]) {
 261                         e.stopPropagation();
 262                         $box.focus();
 263                 }
 264         }
 265
 266         function setClass(str) {
 267                 if (setClass.str !== str) {
 268                         $box.add($overlay).removeClass(setClass.str).addClass(str);
 269                         setClass.str = str;
 270                 }
 271         }
 272
 273         function getRelated(rel) {
 274                 index = 0;
 275
 276                 if (rel && rel !== false && rel !== 'nofollow') {
 277                         $related = $('.' + boxElement).filter(function () {
 278                                 var options = $.data(this, colorbox);
 279                                 var settings = new Settings(this, options);
 280                                 return (settings.get('rel') === rel);
 281                         });
 282                         index = $related.index(settings.el);
 283
 284                         // Check direct calls to Colorbox.
 285                         if (index === -1) {
 286                                 $related = $related.add(settings.el);
 287                                 index = $related.length - 1;
 288                         }
 289                 } else {
 290                         $related = $(settings.el);
 291                 }
 292         }
 293
 294         function trigger(event) {
 295                 // for external use
 296                 $(document).trigger(event);
 297                 // for internal use
 298                 $events.triggerHandler(event);
 299         }
 300
 301         var slideshow = (function(){
 302                 var active,
 303                         className = prefix + "Slideshow_",
 304                         click = "click." + prefix,
 305                         timeOut;
 306
 307                 function clear () {
 308                         clearTimeout(timeOut);
 309                 }
 310
 311                 function set() {
 312                         if (settings.get('loop') || $related[index + 1]) {
 313                                 clear();
 314                                 timeOut = setTimeout(publicMethod.next, settings.get('slideshowSpeed'));
 315                         }
 316                 }
 317
 318                 function start() {
 319                         $slideshow
 320                                 .html(settings.get('slideshowStop'))
 321                                 .unbind(click)
 322                                 .one(click, stop);
 323
 324                         $events
 325                                 .bind(event_complete, set)
 326                                 .bind(event_load, clear);
 327
 328                         $box.removeClass(className + "off").addClass(className + "on");
 329                 }
 330
 331                 function stop() {
 332                         clear();
 333
 334                         $events
 335                                 .unbind(event_complete, set)
 336                                 .unbind(event_load, clear);
 337
 338                         $slideshow
 339                                 .html(settings.get('slideshowStart'))
 340                                 .unbind(click)
 341                                 .one(click, function () {
 342                                         publicMethod.next();
 343                                         start();
 344                                 });
 345
 346                         $box.removeClass(className + "on").addClass(className + "off");
 347                 }
 348
 349                 function reset() {
 350                         active = false;
 351                         $slideshow.hide();
 352                         clear();
 353                         $events
 354                                 .unbind(event_complete, set)
 355                                 .unbind(event_load, clear);
 356                         $box.removeClass(className + "off " + className + "on");
 357                 }
 358
 359                 return function(){
 360                         if (active) {
 361                                 if (!settings.get('slideshow')) {
 362                                         $events.unbind(event_cleanup, reset);
 363                                         reset();
 364                                 }
 365                         } else {
 366                                 if (settings.get('slideshow') && $related[1]) {
 367                                         active = true;
 368                                         $events.one(event_cleanup, reset);
 369                                         if (settings.get('slideshowAuto')) {
 370                                                 start();
 371                                         } else {
 372                                                 stop();
 373                                         }
 374                                         $slideshow.show();
 375                                 }
 376                         }
 377                 };
 378
 379         }());
 380
 381
 382         function launch(element) {
 383                 var options;
 384
 385                 if (!closing) {
 386
 387                         options = $(element).data(colorbox);
 388
 389                         settings = new Settings(element, options);
 390
 391                         getRelated(settings.get('rel'));
 392
 393                         if (!open) {
 394                                 open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
 395
 396                                 setClass(settings.get('className'));
 397
 398                                 // Show colorbox so the sizes can be calculated in older versions of jQuery
 399                                 $box.css({visibility:'hidden', display:'block', opacity:''});
 400
 401                                 $loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden; visibility:hidden');
 402                                 $content.css({width:'', height:''}).append($loaded);
 403
 404                                 // Cache values needed for size calculations
 405                                 interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();
 406                                 interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
 407                                 loadedHeight = $loaded.outerHeight(true);
 408                                 loadedWidth = $loaded.outerWidth(true);
 409
 410                                 // Opens inital empty Colorbox prior to content being loaded.
 411                                 var initialWidth = setSize(settings.get('initialWidth'), 'x');
 412                                 var initialHeight = setSize(settings.get('initialHeight'), 'y');
 413                                 var maxWidth = settings.get('maxWidth');
 414                                 var maxHeight = settings.get('maxHeight');
 415
 416                                 settings.w = Math.max((maxWidth !== false ? Math.min(initialWidth, setSize(maxWidth, 'x')) : initialWidth) - loadedWidth - interfaceWidth, 0);
 417                                 settings.h = Math.max((maxHeight !== false ? Math.min(initialHeight, setSize(maxHeight, 'y')) : initialHeight) - loadedHeight - interfaceHeight, 0);
 418
 419                                 $loaded.css({width:'', height:settings.h});
 420                                 publicMethod.position();
 421
 422                                 trigger(event_open);
 423                                 settings.get('onOpen');
 424
 425                                 $groupControls.add($title).hide();
 426
 427                                 $box.focus();
 428
 429                                 if (settings.get('trapFocus')) {
 430                                         // Confine focus to the modal
 431                                         // Uses event capturing that is not supported in IE8-
 432                                         if (document.addEventListener) {
 433
 434                                                 document.addEventListener('focus', trapFocus, true);
 435
 436                                                 $events.one(event_closed, function () {
 437                                                         document.removeEventListener('focus', trapFocus, true);
 438                                                 });
 439                                         }
 440                                 }
 441
 442                                 // Return focus on closing
 443                                 if (settings.get('returnFocus')) {
 444                                         $events.one(event_closed, function () {
 445                                                 $(settings.el).focus();
 446                                         });
 447                                 }
 448                         }
 449
 450                         var opacity = parseFloat(settings.get('opacity'));
 451                         $overlay.css({
 452                                 opacity: opacity === opacity ? opacity : '',
 453                                 cursor: settings.get('overlayClose') ? 'pointer' : '',
 454                                 visibility: 'visible'
 455                         }).show();
 456
 457                         if (settings.get('closeButton')) {
 458                                 $close.html(settings.get('close')).appendTo($content);
 459                         } else {
 460                                 $close.appendTo('<div/>'); // replace with .detach() when dropping jQuery < 1.4
 461                         }
 462
 463                         load();
 464                 }
 465         }
 466
 467         // Colorbox's markup needs to be added to the DOM prior to being called
 468         // so that the browser will go ahead and load the CSS background images.
 469         function appendHTML() {
 470                 if (!$box) {
 471                         init = false;
 472                         $window = $(window);
 473                         $box = $tag(div).attr({
 474                                 id: colorbox,
 475                                 'class': $.support.opacity === false ? prefix + 'IE' : '', // class for optional IE8 & lower targeted CSS.
 476                                 role: 'dialog',
 477                                 tabindex: '-1'
 478                         }).hide();
 479                         $overlay = $tag(div, "Overlay").hide();
 480                         $loadingOverlay = $([$tag(div, "LoadingOverlay")[0],$tag(div, "LoadingGraphic")[0]]);
 481                         $wrap = $tag(div, "Wrapper");
 482                         $content = $tag(div, "Content").append(
 483                                 $title = $tag(div, "Title"),
 484                                 $current = $tag(div, "Current"),
 485                                 $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
 486                                 $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
 487                                 $slideshow = $tag('button', "Slideshow"),
 488                                 $loadingOverlay
 489                         );
 490
 491                         $close = $('<button type="button"/>').attr({id:prefix+'Close'});
 492
 493                         $wrap.append( // The 3x3 Grid that makes up Colorbox
 494                                 $tag(div).append(
 495                                         $tag(div, "TopLeft"),
 496                                         $topBorder = $tag(div, "TopCenter"),
 497                                         $tag(div, "TopRight")
 498                                 ),
 499                                 $tag(div, false, 'clear:left').append(
 500                                         $leftBorder = $tag(div, "MiddleLeft"),
 501                                         $content,
 502                                         $rightBorder = $tag(div, "MiddleRight")
 503                                 ),
 504                                 $tag(div, false, 'clear:left').append(
 505                                         $tag(div, "BottomLeft"),
 506                                         $bottomBorder = $tag(div, "BottomCenter"),
 507                                         $tag(div, "BottomRight")
 508                                 )
 509                         ).find('div div').css({'float': 'left'});
 510
 511                         $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none; max-width:none;');
 512
 513                         $groupControls = $next.add($prev).add($current).add($slideshow);
 514                 }
 515                 if (document.body && !$box.parent().length) {
 516                         $(document.body).append($overlay, $box.append($wrap, $loadingBay));
 517                 }
 518         }
 519
 520         // Add Colorbox's event bindings
 521         function addBindings() {
 522                 function clickHandler(e) {
 523                         // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt.
 524                         // See: http://jacklmoore.com/notes/click-events/
 525                         if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.ctrlKey)) {
 526                                 e.preventDefault();
 527                                 launch(this);
 528                         }
 529                 }
 530
 531                 if ($box) {
 532                         if (!init) {
 533                                 init = true;
 534
 535                                 // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
 536                                 $next.click(function () {
 537                                         publicMethod.next();
 538                                 });
 539                                 $prev.click(function () {
 540                                         publicMethod.prev();
 541                                 });
 542                                 $close.click(function () {
 543                                         publicMethod.close();
 544                                 });
 545                                 $overlay.click(function () {
 546                                         if (settings.get('overlayClose')) {
 547                                                 publicMethod.close();
 548                                         }
 549                                 });
 550
 551                                 // Key Bindings
 552                                 $(document).bind('keydown.' + prefix, function (e) {
 553                                         var key = e.keyCode;
 554                                         if (open && settings.get('escKey') && key === 27) {
 555                                                 e.preventDefault();
 556                                                 publicMethod.close();
 557                                         }
 558                                         if (open && settings.get('arrowKey') && $related[1] && !e.altKey) {
 559                                                 if (key === 37) {
 560                                                         e.preventDefault();
 561                                                         $prev.click();
 562                                                 } else if (key === 39) {
 563                                                         e.preventDefault();
 564                                                         $next.click();
 565                                                 }
 566                                         }
 567                                 });
 568
 569                                 if ($.isFunction($.fn.on)) {
 570                                         // For jQuery 1.7+
 571                                         $(document).on('click.'+prefix, '.'+boxElement, clickHandler);
 572                                 } else {
 573                                         // For jQuery 1.3.x -> 1.6.x
 574                                         // This code is never reached in jQuery 1.9, so do not contact me about 'live' being removed.
 575                                         // This is not here for jQuery 1.9, it's here for legacy users.
 576                                         $('.'+boxElement).live('click.'+prefix, clickHandler);
 577                                 }
 578                         }
 579                         return true;
 580                 }
 581                 return false;
 582         }
 583
 584         // Don't do anything if Colorbox already exists.
 585         if ($[colorbox]) {
 586                 return;
 587         }
 588
 589         // Append the HTML when the DOM loads
 590         $(appendHTML);
 591
 592
 593         // ****************
 594         // PUBLIC FUNCTIONS
 595         // Usage format: $.colorbox.close();
 596         // Usage from within an iframe: parent.jQuery.colorbox.close();
 597         // ****************
 598
 599         publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
 600                 var settings;
 601                 var $obj = this;
 602
 603                 options = options || {};
 604
 605                 if ($.isFunction($obj)) { // assume a call to $.colorbox
 606                         $obj = $('<a/>');
 607                         options.open = true;
 608                 }
 609
 610                 if (!$obj[0]) { // colorbox being applied to empty collection
 611                         return $obj;
 612                 }
 613
 614                 appendHTML();
 615
 616                 if (addBindings()) {
 617
 618                         if (callback) {
 619                                 options.onComplete = callback;
 620                         }
 621
 622                         $obj.each(function () {
 623                                 var old = $.data(this, colorbox) || {};
 624                                 $.data(this, colorbox, $.extend(old, options));
 625                         }).addClass(boxElement);
 626
 627                         settings = new Settings($obj[0], options);
 628
 629                         if (settings.get('open')) {
 630                                 launch($obj[0]);
 631                         }
 632                 }
 633
 634                 return $obj;
 635         };
 636
 637         publicMethod.position = function (speed, loadedCallback) {
 638                 var
 639                 css,
 640                 top = 0,
 641                 left = 0,
 642                 offset = $box.offset(),
 643                 scrollTop,
 644                 scrollLeft;
 645
 646                 $window.unbind('resize.' + prefix);
 647
 648                 // remove the modal so that it doesn't influence the document width/height
 649                 $box.css({top: -9e4, left: -9e4});
 650
 651                 scrollTop = $window.scrollTop();
 652                 scrollLeft = $window.scrollLeft();
 653
 654                 if (settings.get('fixed')) {
 655                         offset.top -= scrollTop;
 656                         offset.left -= scrollLeft;
 657                         $box.css({position: 'fixed'});
 658                 } else {
 659                         top = scrollTop;
 660                         left = scrollLeft;
 661                         $box.css({position: 'absolute'});
 662                 }
 663
 664                 // keeps the top and left positions within the browser's viewport.
 665                 if (settings.get('right') !== false) {
 666                         left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.get('right'), 'x'), 0);
 667                 } else if (settings.get('left') !== false) {
 668                         left += setSize(settings.get('left'), 'x');
 669                 } else {
 670                         left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
 671                 }
 672
 673                 if (settings.get('bottom') !== false) {
 674                         top += Math.max(winheight() - settings.h - loadedHeight - interfaceHeight - setSize(settings.get('bottom'), 'y'), 0);
 675                 } else if (settings.get('top') !== false) {
 676                         top += setSize(settings.get('top'), 'y');
 677                 } else {
 678                         top += Math.round(Math.max(winheight() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
 679                 }
 680
 681                 $box.css({top: offset.top, left: offset.left, visibility:'visible'});
 682
 683                 // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
 684                 // but it has to be shrank down around the size of div#colorbox when it's done.  If not,
 685                 // it can invoke an obscure IE bug when using iframes.
 686                 $wrap[0].style.width = $wrap[0].style.height = "9999px";
 687
 688                 function modalDimensions() {
 689                         $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt($box[0].style.width,10) - interfaceWidth)+'px';
 690                         $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt($box[0].style.height,10) - interfaceHeight)+'px';
 691                 }
 692
 693                 css = {width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left};
 694
 695                 // setting the speed to 0 if the content hasn't changed size or position
 696                 if (speed) {
 697                         var tempSpeed = 0;
 698                         $.each(css, function(i){
 699                                 if (css[i] !== previousCSS[i]) {
 700                                         tempSpeed = speed;
 701                                         return;
 702                                 }
 703                         });
 704                         speed = tempSpeed;
 705                 }
 706
 707                 previousCSS = css;
 708
 709                 if (!speed) {
 710                         $box.css(css);
 711                 }
 712
 713                 $box.dequeue().animate(css, {
 714                         duration: speed || 0,
 715                         complete: function () {
 716                                 modalDimensions();
 717
 718                                 active = false;
 719
 720                                 // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
 721                                 $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
 722                                 $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
 723
 724                                 if (settings.get('reposition')) {
 725                                         setTimeout(function () {  // small delay before binding onresize due to an IE8 bug.
 726                                                 $window.bind('resize.' + prefix, publicMethod.position);
 727                                         }, 1);
 728                                 }
 729
 730                                 if ($.isFunction(loadedCallback)) {
 731                                         loadedCallback();
 732                                 }
 733                         },
 734                         step: modalDimensions
 735                 });
 736         };
 737
 738         publicMethod.resize = function (options) {
 739                 var scrolltop;
 740
 741                 if (open) {
 742                         options = options || {};
 743
 744                         if (options.width) {
 745                                 settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
 746                         }
 747
 748                         if (options.innerWidth) {
 749                                 settings.w = setSize(options.innerWidth, 'x');
 750                         }
 751
 752                         $loaded.css({width: settings.w});
 753
 754                         if (options.height) {
 755                                 settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
 756                         }
 757
 758                         if (options.innerHeight) {
 759                                 settings.h = setSize(options.innerHeight, 'y');
 760                         }
 761
 762                         if (!options.innerHeight && !options.height) {
 763                                 scrolltop = $loaded.scrollTop();
 764                                 $loaded.css({height: "auto"});
 765                                 settings.h = $loaded.height();
 766                         }
 767
 768                         $loaded.css({height: settings.h});
 769
 770                         if(scrolltop) {
 771                                 $loaded.scrollTop(scrolltop);
 772                         }
 773
 774                         publicMethod.position(settings.get('transition') === "none" ? 0 : settings.get('speed'));
 775                 }
 776         };
 777
 778         publicMethod.prep = function (object) {
 779                 if (!open) {
 780                         return;
 781                 }
 782
 783                 var callback, speed = settings.get('transition') === "none" ? 0 : settings.get('speed');
 784
 785                 $loaded.remove();
 786
 787                 $loaded = $tag(div, 'LoadedContent').append(object);
 788
 789                 function getWidth() {
 790                         settings.w = settings.w || $loaded.width();
 791                         settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
 792                         return settings.w;
 793                 }
 794                 function getHeight() {
 795                         settings.h = settings.h || $loaded.height();
 796                         settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
 797                         return settings.h;
 798                 }
 799
 800                 $loaded.hide()
 801                 .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
 802                 .css({width: getWidth(), overflow: settings.get('scrolling') ? 'auto' : 'hidden'})
 803                 .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
 804                 .prependTo($content);
 805
 806                 $loadingBay.hide();
 807
 808                 // 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.
 809
 810                 $(photo).css({'float': 'none'});
 811
 812                 setClass(settings.get('className'));
 813
 814                 callback = function () {
 815                         var total = $related.length,
 816                                 iframe,
 817                                 complete;
 818
 819                         if (!open) {
 820                                 return;
 821                         }
 822
 823                         function removeFilter() { // Needed for IE8 in versions of jQuery prior to 1.7.2
 824                                 if ($.support.opacity === false) {
 825                                         $box[0].style.removeAttribute('filter');
 826                                 }
 827                         }
 828
 829                         complete = function () {
 830                                 clearTimeout(loadingTimer);
 831                                 $loadingOverlay.hide();
 832                                 trigger(event_complete);
 833                                 settings.get('onComplete');
 834                         };
 835
 836
 837                         $title.html(settings.get('title')).show();
 838                         $loaded.show();
 839
 840                         if (total > 1) { // handle grouping
 841                                 if (typeof settings.get('current') === "string") {
 842                                         $current.html(settings.get('current').replace('{current}', index + 1).replace('{total}', total)).show();
 843                                 }
 844
 845                                 $next[(settings.get('loop') || index < total - 1) ? "show" : "hide"]().html(settings.get('next'));
 846                                 $prev[(settings.get('loop') || index) ? "show" : "hide"]().html(settings.get('previous'));
 847
 848                                 slideshow();
 849
 850                                 // Preloads images within a rel group
 851                                 if (settings.get('preloading')) {
 852                                         $.each([getIndex(-1), getIndex(1)], function(){
 853                                                 var img,
 854                                                         i = $related[this],
 855                                                         settings = new Settings(i, $.data(i, colorbox)),
 856                                                         src = settings.get('href');
 857
 858                                                 if (src && isImage(settings, src)) {
 859                                                         src = retinaUrl(settings, src);
 860                                                         img = document.createElement('img');
 861                                                         img.src = src;
 862                                                 }
 863                                         });
 864                                 }
 865                         } else {
 866                                 $groupControls.hide();
 867                         }
 868
 869                         if (settings.get('iframe')) {
 870
 871                                 iframe = settings.get('createIframe');
 872
 873                                 if (!settings.get('scrolling')) {
 874                                         iframe.scrolling = "no";
 875                                 }
 876
 877                                 $(iframe)
 878                                         .attr({
 879                                                 src: settings.get('href'),
 880                                                 'class': prefix + 'Iframe'
 881                                         })
 882                                         .one('load', complete)
 883                                         .appendTo($loaded);
 884
 885                                 $events.one(event_purge, function () {
 886                                         iframe.src = "//about:blank";
 887                                 });
 888
 889                                 if (settings.get('fastIframe')) {
 890                                         $(iframe).trigger('load');
 891                                 }
 892                         } else {
 893                                 complete();
 894                         }
 895
 896                         if (settings.get('transition') === 'fade') {
 897                                 $box.fadeTo(speed, 1, removeFilter);
 898                         } else {
 899                                 removeFilter();
 900                         }
 901                 };
 902
 903                 if (settings.get('transition') === 'fade') {
 904                         $box.fadeTo(speed, 0, function () {
 905                                 publicMethod.position(0, callback);
 906                         });
 907                 } else {
 908                         publicMethod.position(speed, callback);
 909                 }
 910         };
 911
 912         function load () {
 913                 var href, setResize, prep = publicMethod.prep, $inline, request = ++requests;
 914
 915                 active = true;
 916
 917                 photo = false;
 918
 919                 trigger(event_purge);
 920                 trigger(event_load);
 921                 settings.get('onLoad');
 922
 923                 settings.h = settings.get('height') ?
 924                                 setSize(settings.get('height'), 'y') - loadedHeight - interfaceHeight :
 925                                 settings.get('innerHeight') && setSize(settings.get('innerHeight'), 'y');
 926
 927                 settings.w = settings.get('width') ?
 928                                 setSize(settings.get('width'), 'x') - loadedWidth - interfaceWidth :
 929                                 settings.get('innerWidth') && setSize(settings.get('innerWidth'), 'x');
 930
 931                 // Sets the minimum dimensions for use in image scaling
 932                 settings.mw = settings.w;
 933                 settings.mh = settings.h;
 934
 935                 // Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
 936                 // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
 937                 if (settings.get('maxWidth')) {
 938                         settings.mw = setSize(settings.get('maxWidth'), 'x') - loadedWidth - interfaceWidth;
 939                         settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
 940                 }
 941                 if (settings.get('maxHeight')) {
 942                         settings.mh = setSize(settings.get('maxHeight'), 'y') - loadedHeight - interfaceHeight;
 943                         settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
 944                 }
 945
 946                 href = settings.get('href');
 947
 948                 loadingTimer = setTimeout(function () {
 949                         $loadingOverlay.show();
 950                 }, 100);
 951
 952                 if (settings.get('inline')) {
 953                         var $target = $(href);
 954                         // Inserts an empty placeholder where inline content is being pulled from.
 955                         // An event is bound to put inline content back when Colorbox closes or loads new content.
 956                         $inline = $('<div>').hide().insertBefore($target);
 957
 958                         $events.one(event_purge, function () {
 959                                 $inline.replaceWith($target);
 960                         });
 961
 962                         prep($target);
 963                 } else if (settings.get('iframe')) {
 964                         // IFrame element won't be added to the DOM until it is ready to be displayed,
 965                         // to avoid problems with DOM-ready JS that might be trying to run in that iframe.
 966                         prep(" ");
 967                 } else if (settings.get('html')) {
 968                         prep(settings.get('html'));
 969                 } else if (isImage(settings, href)) {
 970
 971                         href = retinaUrl(settings, href);
 972
 973                         photo = settings.get('createImg');
 974
 975                         $(photo)
 976                         .addClass(prefix + 'Photo')
 977                         .bind('error.'+prefix,function () {
 978                                 prep($tag(div, 'Error').html(settings.get('imgError')));
 979                         })
 980                         .one('load', function () {
 981                                 if (request !== requests) {
 982                                         return;
 983                                 }
 984
 985                                 // A small pause because some browsers will occassionaly report a
 986                                 // img.width and img.height of zero immediately after the img.onload fires
 987                                 setTimeout(function(){
 988                                         var percent;
 989
 990                                         if (settings.get('retinaImage') && window.devicePixelRatio > 1) {
 991                                                 photo.height = photo.height / window.devicePixelRatio;
 992                                                 photo.width = photo.width / window.devicePixelRatio;
 993                                         }
 994
 995                                         if (settings.get('scalePhotos')) {
 996                                                 setResize = function () {
 997                                                         photo.height -= photo.height * percent;
 998                                                         photo.width -= photo.width * percent;
 999                                                 };
1000                                                 if (settings.mw && photo.width > settings.mw) {
1001                                                         percent = (photo.width - settings.mw) / photo.width;
1002                                                         setResize();
1003                                                 }
1004                                                 if (settings.mh && photo.height > settings.mh) {
1005                                                         percent = (photo.height - settings.mh) / photo.height;
1006                                                         setResize();
1007                                                 }
1008                                         }
1009
1010                                         if (settings.h) {
1011                                                 photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
1012                                         }
1013
1014                                         if ($related[1] && (settings.get('loop') || $related[index + 1])) {
1015                                                 photo.style.cursor = 'pointer';
1016
1017                                                 $(photo).bind('click.'+prefix, function () {
1018                                                         publicMethod.next();
1019                                                 });
1020                                         }
1021
1022                                         photo.style.width = photo.width + 'px';
1023                                         photo.style.height = photo.height + 'px';
1024                                         prep(photo);
1025                                 }, 1);
1026                         });
1027
1028                         photo.src = href;
1029
1030                 } else if (href) {
1031                         $loadingBay.load(href, settings.get('data'), function (data, status) {
1032                                 if (request === requests) {
1033                                         prep(status === 'error' ? $tag(div, 'Error').html(settings.get('xhrError')) : $(this).contents());
1034                                 }
1035                         });
1036                 }
1037         }
1038
1039         // Navigates to the next page/image in a set.
1040         publicMethod.next = function () {
1041                 if (!active && $related[1] && (settings.get('loop') || $related[index + 1])) {
1042                         index = getIndex(1);
1043                         launch($related[index]);
1044                 }
1045         };
1046
1047         publicMethod.prev = function () {
1048                 if (!active && $related[1] && (settings.get('loop') || index)) {
1049                         index = getIndex(-1);
1050                         launch($related[index]);
1051                 }
1052         };
1053
1054         // Note: to use this within an iframe use the following format: parent.jQuery.colorbox.close();
1055         publicMethod.close = function () {
1056                 if (open && !closing) {
1057
1058                         closing = true;
1059                         open = false;
1060                         trigger(event_cleanup);
1061                         settings.get('onCleanup');
1062                         $window.unbind('.' + prefix);
1063                         $overlay.fadeTo(settings.get('fadeOut') || 0, 0);
1064
1065                         $box.stop().fadeTo(settings.get('fadeOut') || 0, 0, function () {
1066                                 $box.hide();
1067                                 $overlay.hide();
1068                                 trigger(event_purge);
1069                                 $loaded.remove();
1070
1071                                 setTimeout(function () {
1072                                         closing = false;
1073                                         trigger(event_closed);
1074                                         settings.get('onClosed');
1075                                 }, 1);
1076                         });
1077                 }
1078         };
1079
1080         // Removes changes Colorbox made to the document, but does not remove the plugin.
1081         publicMethod.remove = function () {
1082                 if (!$box) { return; }
1083
1084                 $box.stop();
1085                 $[colorbox].close();
1086                 $box.stop(false, true).remove();
1087                 $overlay.remove();
1088                 closing = false;
1089                 $box = null;
1090                 $('.' + boxElement)
1091                         .removeData(colorbox)
1092                         .removeClass(boxElement);
1093
1094                 $(document).unbind('click.'+prefix).unbind('keydown.'+prefix);
1095         };
1096
1097         // A method for fetching the current element Colorbox is referencing.
1098         // returns a jQuery object.
1099         publicMethod.element = function () {
1100                 return $(settings.el);
1101         };
1102
1103         publicMethod.settings = defaults;
1104
1105 }(jQuery, document, window));