Fancybox2 vs Colorbox (v3)

Revision 3 of this benchmark created on

Description

Performance Test between Fancybox 2 and Colorbox.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Fancybox2
/*! 
 * fancyBox 2.0.1
 * Copyright 2011, Janis Skarnelis (www.fancyapps.com)
 * License: www.fancyapps.com/fancybox/#license
 *      
 */
(function(window, document, $) {
  var W = $(window),
      D = $(document),
      F = $.fancybox = function() {
      F.open.apply(this, arguments);
      },
      didResize = false,
      resizeTimer = null;

  $.extend(F, {
    // The current version of fancyBox
    version: '2.0.1',

    defaults: {
      padding: 15,
      margin: 20,

      width: 800,
      height: 600,
      minWidth: 200,
      minHeight: 200,
      maxWidth: 9999,
      maxHeight: 9999,

      autoSize: true,
      fitToView: true,
      aspectRatio: false,
      topRatio: 0.5,

      fixed: !$.browser.msie || $.browser.version > 6,
      scrolling: 'auto',
      // 'auto', 'yes' or 'no'
      wrapCSS: 'fancybox-default',

      arrows: true,
      closeBtn: true,
      closeClick: true,
      mouseWheel: true,
      autoPlay: false,
      playSpeed: 3000,

      loop: true,
      ajax: {},
      keys: {
        next: [13, 32, 34, 39, 40],
        // enter, space, page down, right arrow, down arrow
        prev: [8, 33, 37, 38],
        // backspace, page up, left arrow, up arrow
        close: [27] // escape key
      },

      // Override some properties
      index: 0,
      type: null,
      href: null,
      content: null,
      title: null,

      // HTML templates
      tpl: {
        wrap: '<div class="fancybox-wrap"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div>',
        image: '<img class="fancybox-image" src="{href}" alt="" />',
        iframe: '<iframe class="fancybox-iframe" name="fancybox-frame{rnd}" frameborder="0" hspace="0" ' + ($.browser.msie ? 'allowtransparency="true""' : '') + ' scrolling="{scrolling}" src="{href}"></iframe>',
        swf: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>',
        error: '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
        closeBtn: '<div title="Close" class="fancybox-item fancybox-close"></div>',
        next: '<a title="Next" class="fancybox-item fancybox-next"><span></span></a>',
        prev: '<a title="Previous" class="fancybox-item fancybox-prev"><span></span></a>'
      },

      // Properties for each animation type
      // Opening fancyBox
      openEffect: 'fade',
      // 'elastic', 'fade' or 'none'
      openSpeed: 500,
      openEasing: 'swing',
      openOpacity: true,
      openMethod: 'zoomIn',

      // Closing fancyBox
      closeEffect: 'fade',
      // 'elastic', 'fade' or 'none'
      closeSpeed: 500,
      closeEasing: 'swing',
      closeOpacity: true,
      closeMethod: 'zoomOut',

      // Changing next gallery item
      nextEffect: 'elastic',
      // 'elastic', 'fade' or 'none'
      nextSpeed: 300,
      nextEasing: 'swing',
      nextMethod: 'changeIn',

      // Changing previous gallery item
      prevEffect: 'elastic',
      // 'elastic', 'fade' or 'none'
      prevSpeed: 300,
      prevEasing: 'swing',
      prevMethod: 'changeOut',

      // Enabled helpers
      helpers: {
        overlay: {
          speedIn: 0,
          speedOut: 0,
          opacity: 0.85,
          css: {
            cursor: 'pointer',
            'background-color': 'rgba(0, 0, 0, 0.85)' //Browsers who don`t support rgba will fall back to default color value defined at CSS file
          },
          closeClick: true
        },
        title: {
          type: 'float' // 'float', 'inside', 'outside' or 'over'
        }
      },

      // Callbacks
      onCancel: $.noop,
      // If canceling
      beforeLoad: $.noop,
      // Before loading
      afterLoad: $.noop,
      // After loading
      beforeShow: $.noop,
      // Before changing in current item
      afterShow: $.noop,
      // After opening
      beforeClose: $.noop,
      // Before closing
      afterClose: $.noop // After closing
    },

    //Current state
    group: {},
    // Selected group
    opts: {},
    // Group options
    coming: null,
    // Element being loaded
    current: null,
    // Currently loaded element
    isOpen: false,
    // Is currently open
    isOpened: false,
    // Have been fully opened at least once
    wrap: null,
    outer: null,
    inner: null,

    player: {
      timer: null,
      isActive: false
    },

    // Loaders
    ajaxLoad: null,
    imgPreload: null,

    // Some collections
    transitions: {},
    helpers: {},

/*
                 *      Static methods
                 */

    open: function(group, opts) {
      // Normalize group
      if (!$.isArray(group)) {
        group = [group];
      }

      if (!group.length) {
        return;
      }

      //Kill existing instances
      F.close(true);

      //extend the defaults
      F.opts = $.extend(true, {}, F.defaults, opts);
      F.group = group;

      F._start(F.opts.index || 0);
    },

    cancel: function() {
      if (F.coming && false === F.trigger('onCancel')) {
        return;
      }

      F.coming = null;

      F.hideLoading();

      if (F.ajaxLoad) {
        F.ajaxLoad.abort();
      }

      F.ajaxLoad = null;

      if (F.imgPreload) {
        F.imgPreload.onload = F.imgPreload.onabort = F.imgPreload.onerror = null;
      }
    },

    close: function(a) {
      F.cancel();

      if (!F.current || false === F.trigger('beforeClose')) {
        return;
      }

      //If forced or is still opening then remove immediately
      if (!F.isOpen || (a && a[0] === true)) {
        $(".fancybox-wrap").stop().trigger('onReset').remove();

        F._afterZoomOut();

      } else {
        F.isOpen = F.isOpened = false;

        $(".fancybox-item").remove();

        F.wrap.stop(true).removeClass('fancybox-opened');
        F.inner.css('overflow', 'hidden');

        F.transitions[F.current.closeMethod]();
      }
    },

    play: function(a) {
      var clear = function() {
          clearTimeout(F.player.timer);
          },
          set = function() {
          clear();

          if (F.current && F.player.isActive) {
            F.player.timer = setTimeout(F.next, F.current.playSpeed);
          }
          },
          stop = function() {
          clear();

          D.unbind('.player');

          F.player.isActive = false;

          F.trigger('onPlayEnd');
          },
          start = function() {
          if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) {
            F.player.isActive = true;

            set();

            D.bind({
              'onCancel.player onComplete.player onUpdate.player': set,
              'onClose.player': stop,
              'onStart.player': clear
            });

            F.trigger('onPlayStart');
          }
          };

      if (F.player.isActive || (a && a[0] === false)) {
        stop();
      } else {
        start();
      }
    },

    next: function() {
      F.current && F.jumpto(F.current.index + 1);
    },

    prev: function() {
      F.current && F.jumpto(F.current.index - 1);
    },

    jumpto: function(index) {
      if (!F.current) {
        return;
      }

      index = parseInt(index, 10);

      if (F.group.length > 1 && F.current.loop) {
        if (index >= F.group.length) {
          index = 0;

        } else if (index < 0) {
          index = F.group.length - 1;
        }
      }

      if (typeof F.group[index] !== 'undefined') {
        F.cancel();

        F._start(index);
      }
    },

    reposition: function(a) {
      if (F.isOpen) {
        F.wrap.css(F._getPosition(a));
      }
    },

    update: function() {
      if (F.isOpen) {
        // It's a very bad idea to attach handlers to the window scroll event, run this code after a delay
        if (!didResize) {
          resizeTimer = setInterval(function() {
            if (didResize) {
              didResize = false;

              clearTimeout(resizeTimer);

              if (F.current) {
                if (F.current.autoSize) {
                  F.inner.height('auto');
                  F.current.height = F.inner.height();
                }

                F._setDimension();

                if (F.current.canGrow) {
                  F.inner.height('auto');
                }

                F.reposition();

                F.trigger('onUpdate');
              }
            }
          }, 100);
        }

        didResize = true;
      }
    },

    toggle: function() {
      if (F.isOpen) {
        F.current.fitToView = !F.current.fitToView;

        F.update();
      }
    },

    hideLoading: function() {
      $("#fancybox-loading").remove();
    },

    showLoading: function() {
      F.hideLoading();

      $('<div id="fancybox-loading"></div>').click(F.cancel).appendTo('body');
    },

    getViewport: function() {
      return {
        x: W.scrollLeft(),
        y: W.scrollTop(),
        w: W.width(),
        h: W.height()
      };
    },

    // Unbind the keyboard / clicking actions
    unbindEvents: function() {
      D.unbind('.fb');
      W.unbind('.fb');
    },

    bindEvents: function() {
      var current = F.current,
          keys = current.keys;

      if (!current) {
        return;
      }

      W.bind('resize.fb, orientationchange.fb', F.update);

      if (keys) {
        D.bind('keydown.fb', function(e) {
          // Ignore key events within form elements
          if ($.inArray(e.target.tagName.toLowerCase(), ['input', 'textarea', 'select', 'button']) > -1) {
            return;
          }

          if ($.inArray(e.keyCode, keys.close) > -1) {
            F.close();
            e.preventDefault();

          } else if ($.inArray(e.keyCode, keys.next) > -1) {
            F.next();
            e.preventDefault();

          } else if ($.inArray(e.keyCode, keys.prev) > -1) {
            F.prev();
            e.preventDefault();
          }
        });
      }

      if ($.fn.mousewheel && current.mouseWheel && F.group.length > 1) {
        F.wrap.bind('mousewheel.fb', function(e, delta) {
          if ($(e.target).get(0).clientHeight === 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
            e.preventDefault();

            F[delta > 0 ? 'prev' : 'next']();
          }
        });
      }
    },

    trigger: function(event) {
      var ret, obj = $.inArray(event, ['onCancel', 'beforeLoad', 'afterLoad']) > -1 ? 'coming' : 'current';

      if (!F[obj]) {
        return;
      }

      if ($.isFunction(F[obj][event])) {
        ret = F[obj][event].apply(F[obj], Array.prototype.slice.call(arguments, 1));
      }

      if (ret === false) {
        return false;
      }

      if (F[obj].helpers) {
        $.each(F[obj].helpers, function(helper, opts) {
          if (opts && typeof F.helpers[helper] !== 'undefined' && $.isFunction(F.helpers[helper][event])) {
            F.helpers[helper][event](opts);
          }
        });
      }

      $.event.trigger(event + '.fb');
    },

    isImage: function(str) {
      return str && str.match(/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i);
    },

    isSWF: function(str) {
      return str && str.match(/\.(swf)(.*)?$/i);
    },

    _start: function(index) {
      var element = F.group[index] || null,
          isDom, href, type, rez;
      coming = $.extend(true, {}, F.opts, ($.isPlainObject(element) ? element : {}), {
        index: index,
        element: element
      });

      // Convert margin property to array - top, right, bottom, left
      if (typeof coming.margin === 'number') {
        coming.margin = [coming.margin, coming.margin, coming.margin, coming.margin];
      }

      //Give a chance for callback or helpers to update coming item (type, title, etc)
      F.coming = coming;

      if (false === F.trigger('beforeLoad')) {
        F.coming = null;
        return;
      }

      //If custom content exists than use it as element
      if (coming.content) {
        element = coming.content;
        type = 'html';
      }

      if (typeof element == 'object' && (element.nodeType || element instanceof $)) {
        isDom = true;
        coming.href = $(element).attr('href') || coming.href;
        coming.title = $(element).attr('title') || coming.title;
      }

      type = coming.type;
      href = coming.href;
      element = coming.element;

      //Check if content type is set, if not, try to get
      if (!type) {
        //If we have source path we can use it to load content ... 
        if (href) {
          if (isDom) {
            rez = $(element).data('fancybox-type');

            if (!rez && element.className) {
              rez = element.className.match(/fancybox\.(\w+)/);
              rez = rez ? rez[1] : false;
            }
          }

          if (rez) {
            type = rez;

          } else if (F.isImage(href)) {
            type = 'image';

          } else if (F.isSWF(href)) {
            type = 'swf';

          } else if (href.match(/^#/)) {
            type = 'inline';

          } else {
            coming.content = href;
          }
        }

        // ...if not - display element itself
        if (!type) {
          type = isDom ? 'inline' : 'html';
        }

        coming.type = type;
      }

      if (!coming.content) {
        coming.content = type === 'inline' && href ? $(href) : element;
      }

      F.coming = coming;

      if (type === 'image') {
        F._loadImage();

      } else if (type === 'ajax') {
        F._loadAjax();

      } else {
        if (!type || (type === 'inline' && !coming.content.length)) {
          F._error();

        } else {
          F._afterLoad();
        }
      }
    },

    _error: function() {
      F.coming.type = 'html';
      F.coming.minHeight = 0;
      F.coming.autoSize = true;
      F.coming.content = F.coming.tpl.error;

      F._afterLoad();
    },

    _loadImage: function() {
      // Reset preload image so it is later possible to check "complete" property
      F.imgPreload = new Image();

      F.imgPreload.onload = function() {
        this.onload = this.onerror = null;

        F.coming.width = this.width;
        F.coming.height = this.height;

        F._afterLoad();
      };

      F.imgPreload.onerror = function() {
        this.onload = this.onerror = null;

        F._error();
      };

      F.imgPreload.src = F.coming.href;

      if (!F.imgPreload.complete) {
        F.showLoading();
      }
    },

    _loadAjax: function() {
      F.showLoading();

      F.ajaxLoad = $.ajax($.extend({}, F.coming.ajax, {
        url: F.coming.href,
        error: function(jqXHR, textStatus, errorThrown) {
          if (textStatus !== 'abort' && jqXHR.status > 0) {
            F.coming.content = errorThrown;

            F._error();

          } else {
            F.hideLoading();
          }
        },
        success: function(data, textStatus, jqXHR) {
          if (textStatus === 'success') {
            F.coming.content = data;

            F._afterLoad();
          }
        }
      }));
    },

    _afterLoad: function() {
      F.hideLoading();

      if (!F.coming || false === F.trigger('afterLoad', F.current)) {
        F.coming = false;

        return;
      }

      if (F.isOpened) {
        $(".fancybox-item").remove();

        F.wrap.stop(true).removeClass('fancybox-opened');

        F.transitions[F.current.prevMethod]();

      } else {
        $(".fancybox-wrap").stop().trigger('onReset').remove();
      }

      F.isOpen = false;
      F.current = F.coming;
      F.coming = false;

      //Build the neccessary markup
      F.wrap = $(F.current.tpl.wrap).addClass(F.current.wrapCSS).appendTo('body');
      F.outer = $('.fancybox-outer', F.wrap).css('padding', F.current.padding + 'px');
      F.inner = $('.fancybox-inner', F.wrap);

      F._setContent();

      F.unbindEvents();
      F.bindEvents();

      //Give a chance for helpers or callbacks to update elements
      F.trigger('beforeShow');

      F._setDimension();

      if (F.isOpened) {
        F.transitions[F.current.nextMethod]();

      } else {
        F.transitions[F.current.openMethod]();
      }
    },

    _setContent: function() {
      var content, loadingBay, current = F.current,
          type = current.type;

      switch (type) {
      case 'inline':
      case 'ajax':
      case 'html':
        if (type === 'inline') {
          content = current.content.show().detach();

          if (content.parent().hasClass('fancybox-inner')) {
            content.parents('.fancybox-wrap').trigger('onReset').remove();
          }

          $(F.wrap).bind('onReset', function() {
            content.appendTo('body').hide();
          });

        } else {
          content = current.content;
        }

        if (current.autoSize) {
          loadingBay = $('<div class="fancybox-tmp"></div>').appendTo($("body")).append(content);

          current.width = loadingBay.outerWidth();
          current.height = loadingBay.outerHeight(true);

          content = loadingBay.children().detach();

          loadingBay.remove();
        }

        break;

      case 'image':
        content = current.tpl.image.replace('{href}', current.href);

        current.aspectRatio = true;
        break;

      case 'swf':
        content = current.tpl.swf.replace(/\{width\}/g, current.width).replace(/\{height\}/g, current.height).replace(/\{href\}/g, current.href);
        break;

      case 'iframe':
        content = current.tpl.iframe.replace('{href}', current.href).replace('{scrolling}', current.scrolling).replace('{rnd}', new Date().getTime());
        break;
      }

      if ($.inArray(type, ['image', 'swf', 'iframe']) > -1) {
        current.autoSize = false;
        current.scrolling = false;
      }

      F.current = current;

      F.inner.append(content);
    },

    _setDimension: function() {
      var viewport = F.getViewport(),
          margin = F.current.margin,
          padding2 = F.current.padding * 2,
          width = F.current.width + padding2,
          height = F.current.height + padding2,
          ratio = F.current.width / F.current.height,
          
          
          maxWidth = F.current.maxWidth,
          maxHeight = F.current.maxHeight,
          minWidth = F.current.minWidth,
          minHeight = F.current.minHeight,
          height_;

      viewport.w -= (margin[1] + margin[3]);
      viewport.h -= (margin[0] + margin[2]);

      if (width.toString().indexOf('%') > -1) {
        width = ((viewport.w * parseFloat(width)) / 100);
      }

      if (height.toString().indexOf('%') > -1) {
        height = ((viewport.h * parseFloat(height)) / 100);
      }

      if (F.current.fitToView) {
        maxWidth = Math.min(viewport.w, maxWidth);
        maxHeight = Math.min(viewport.h, maxHeight);
      }

      maxWidth = Math.max(minWidth, maxWidth);
      maxHeight = Math.max(minHeight, maxHeight);

      if (F.current.aspectRatio) {
        if (width > maxWidth) {
          width = maxWidth;
          height = ((width - padding2) / ratio) + padding2;
        }

        if (height > maxHeight) {
          height = maxHeight;
          width = ((height - padding2) * ratio) + padding2;
        }

        if (width < minWidth) {
          width = minWidth;
          height = ((width - padding2) / ratio) + padding2;
        }

        if (height < minHeight) {
          height = minHeight;
          width = ((height - padding2) * ratio) + padding2;
        }

      } else {
        width = Math.max(minWidth, Math.min(width, maxWidth));
        height = Math.max(minHeight, Math.min(height, maxHeight));
      }

      width = Math.round(width);
      height = Math.round(height);

      //Reset dimensions
      $(F.wrap.add(F.outer).add(F.inner)).width('auto').height('auto');

      F.inner.width(width - padding2).height(height - padding2);
      F.wrap.width(width);

      height_ = F.wrap.height(); // Real wrap height
      //Fit wrapper inside
      if (width > maxWidth || height_ > maxHeight) {
        while ((width > maxWidth || height_ > maxHeight) && width > minWidth && height_ > minHeight) {
          height = height - 10;

          if (F.current.aspectRatio) {
            width = Math.round(((height - padding2) * ratio) + padding2);

            if (width < minWidth) {
              width = minWidth;
              height = ((width - padding2) / ratio) + padding2;
            }

          } else {
            width = width - 10;
          }

          F.inner.width(width - padding2).height(height - padding2);
          F.wrap.width(width);

          height_ = F.wrap.height();
        }
      }

      F.current.dim = {
        width: width,
        height: height_
      };

      F.current.canGrow = F.current.autoSize && height > minHeight && height < maxHeight;
      F.current.canShrink = false;
      F.current.canExpand = false;

      if ((width - padding2) < F.current.width || (height - padding2) < F.current.height) {
        F.current.canExpand = true;

      } else if ((width > viewport.w || height_ > viewport.h) && width > minWidth && height > minHeight) {
        F.current.canShrink = true;
      }
    },

    _getPosition: function(a) {
      var viewport = F.getViewport(),
          margin = F.current.margin,
          width = F.wrap.width() + margin[1] + margin[3],
          height = F.wrap.height() + margin[0] + margin[2],
          rez = {
          position: 'absolute',
          top: margin[0] + viewport.y,
          left: margin[3] + viewport.x
          };

      if (F.current.fixed && (!a || a[0] === false) && height <= viewport.h && width <= viewport.w) {
        rez = {
          position: 'fixed',
          top: margin[0],
          left: margin[3]
        };
      }

      rez.top = Math.ceil(Math.max(rez.top, rez.top + ((viewport.h - height) * F.current.topRatio))) + 'px';
      rez.left = Math.ceil(Math.max(rez.left, rez.left + ((viewport.w - width) * 0.5))) + 'px';

      return rez;
    },

    _afterZoomIn: function() {
      var current = F.current;

      F.isOpen = F.isOpened = true;

      F.wrap.addClass('fancybox-opened').css('overflow', 'visible');

      F.update();

      F.inner.css('overflow', current.scrolling === 'auto' ? 'auto' : (current.scrolling === 'yes' ? 'scroll' : 'hidden'));

      //Assign a click event
      if (current.closeClick) {
        F.inner.bind('click.fb', F.close);
      }

      //Create a close button
      if (current.closeBtn) {
        $(F.current.tpl.closeBtn).appendTo(F.wrap).bind('click.fb', F.close);
      }

      //Create navigation arrows
      if (current.arrows && F.group.length > 1) {
        if (current.loop || current.index > 0) {
          $(current.tpl.prev).appendTo(F.wrap).bind('click.fb', F.prev);
        }

        if (current.loop || current.index < F.group.length - 1) {
          $(current.tpl.next).appendTo(F.wrap).bind('click.fb', F.next);
        }
      }

      F.trigger('afterShow');

      if (F.opts.autoPlay && !F.player.isActive) {
        F.opts.autoPlay = false;

        F.play();
      }
    },

    _afterZoomOut: function() {
      F.unbindEvents();

      F.trigger('afterClose');

      F.wrap.trigger('onReset').remove();

      $.extend(F, {
        group: {},
        opts: {},
        current: null,
        isOpened: false,
        isOpen: false,
        wrap: null,
        outer: null,
        inner: null
      });
    }
  });

/*
         *      Default transitions
         */

  F.transitions = {
    getOrigPosition: function() {
      var element = F.current.element,
          pos = {},
          width = 50,
          height = 50,
          image, viewport;

      if (element && element.nodeName && $(element).is(':visible')) {
        image = $(element).find('img:first');

        if (image.length) {
          pos = image.offset();
          width = image.outerWidth();
          height = image.outerHeight();

        } else {
          pos = $(element).offset();
        }

      } else {
        viewport = F.getViewport();
        pos.top = viewport.y + (viewport.h - height) * 0.5;
        pos.left = viewport.x + (viewport.w - width) * 0.5;
      }

      pos = {
        top: Math.ceil(pos.top) + 'px',
        left: Math.ceil(pos.left) + 'px',
        width: Math.ceil(width) + 'px',
        height: Math.ceil(height) + 'px'
      };

      return pos;
    },

    step: function(now, fx) {
      var ratio, innerValue, outerValue;

      if (fx.prop === 'width' || fx.prop === 'height') {
        innerValue = outerValue = Math.ceil(now - (F.current.padding * 2));

        if (fx.prop === 'height') {
          ratio = (now - fx.start) / (fx.end - fx.start);

          if (fx.start > fx.end) {
            ratio = 1 - ratio;
          }

          innerValue -= F.innerSpace * ratio;
          outerValue -= F.outerSpace * ratio;
        }

        F.inner[fx.prop](innerValue);
        F.outer[fx.prop](outerValue);
      }
    },

    zoomIn: function() {
      var startPos, endPos, dim = F.current.dim,
          space = dim.height - (F.current.padding * 2);

      F.innerSpace = space - F.inner.height();
      F.outerSpace = space - F.outer.height();

      if (F.current.openEffect === 'elastic') {
        endPos = $.extend({}, dim, F._getPosition(true));

        //Remove "position" property
        delete endPos.position;

        startPos = this.getOrigPosition();

        if (F.current.openOpacity) {
          startPos.opacity = 0;
          endPos.opacity = 1;
        }

        F.wrap.css(startPos).animate(endPos, {
          duration: F.current.openSpeed,
          easing: F.current.openEasing,
          step: this.step,
          complete: F._afterZoomIn
        });

      } else {
        F.wrap.css($.extend({}, F.current.dim, F._getPosition()));

        if (F.current.openEffect === 'fade') {
          F.wrap.hide().fadeIn(F.current.openSpeed, F._afterZoomIn);

        } else {
          F._afterZoomIn();
        }
      }
    },

    zoomOut: function() {
      var endPos, space = F.wrap.height() - (F.current.padding * 2);

      if (F.current.closeEffect === 'elastic') {
        if (F.wrap.css('position') === 'fixed') {
          F.wrap.css(F._getPosition(true));
        }

        F.innerSpace = space - F.inner.height();
        F.outerSpace = space - F.outer.height();

        endPos = this.getOrigPosition();

        if (F.current.closeOpacity) {
          endPos.opacity = 0;
        }

        F.wrap.animate(endPos, {
          duration: F.current.closeSpeed,
          easing: F.current.closeEasing,
          step: this.step,
          complete: F._afterZoomOut
        });

      } else {
        F.wrap.fadeOut(F.current.closeEffect === 'fade' ? F.current.Speed : 0, F._afterZoomOut);
      }
    },

    changeIn: function() {
      var startPos;

      if (F.current.nextEffect === 'elastic') {
        startPos = F._getPosition(true);
        startPos.opacity = 0;
        startPos.top = (parseInt(startPos.top, 10) - 200) + 'px';

        F.wrap.css(startPos).animate({
          opacity: 1,
          top: '+=200px'
        }, {
          duration: F.current.nextSpeed,
          complete: F._afterZoomIn
        });

      } else {
        F.wrap.css(F._getPosition());

        if (F.current.nextEffect === 'fade') {
          F.wrap.hide().fadeIn(F.current.nextSpeed, F._afterZoomIn);

        } else {
          F._afterZoomIn();
        }
      }
    },

    changeOut: function() {
      function cleanUp() {
        $(this).trigger('onReset').remove();
      }

      F.wrap.removeClass('fancybox-opened');

      if (F.current.prevEffect === 'elastic') {
        F.wrap.animate({
          'opacity': 0,
          top: '+=200px'
        }, {
          duration: F.current.prevSpeed,
          complete: cleanUp
        });

      } else {
        F.wrap.fadeOut(F.current.prevEffect === 'fade' ? F.current.prevSpeed : 0, cleanUp);
      }
    }
  };

/*
         *      Overlay helper
         */

  F.helpers.overlay = {
    overlay: null,

    update: function() {
      var width, scrollWidth, offsetWidth;

      //Reset width/height so it will not mess
      this.overlay.width(0).height(0);

      if ($.browser.msie) {
        scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
        offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);

        width = scrollWidth < offsetWidth ? W.width() : scrollWidth;

      } else {
        width = D.width();
      }

      this.overlay.width(width).height(D.height());
    },

    beforeShow: function(opts) {
      if (this.overlay) {
        return;
      }

      this.overlay = $('<div id="fancybox-overlay"></div>').css(opts.css || {
        background: 'black'
      }).appendTo('body');

      if (opts.closeClick) {
        this.overlay.bind('click.fb', F.close);
      }

      W.bind("resize.fb", $.proxy(this.update, this));

      this.update();

      this.overlay.fadeTo(opts.speedIn || "fast", opts.opacity || 1);
    },

    onUpdate: function() {
      //Update as content may change document dimensions
      this.update();
    },

    afterClose: function(opts) {
      if (this.overlay) {
        this.overlay.fadeOut(opts.speedOut || "fast", function() {
          $(this).remove();
        });
      }

      this.overlay = null;
    }
  };

/*
         *      Title helper
         */

  F.helpers.title = {
    beforeShow: function(opts) {
      var title, text = F.current.title || F.current.element.title || '';

      if (text) {
        title = $('<div class="fancybox-title fancybox-title-' + opts.type + '-wrap">' + text + '</div>').appendTo('body');

        if (opts.type === 'float') {
          //This helps for some browsers
          title.width(title.width());

          title.wrapInner('<span class="child"></span>');

          //Increase bottom margin so this title will also fit into viewport
          F.current.margin[2] += Math.abs(parseInt(title.css('margin-bottom'), 10));
        }

        title.appendTo(opts.type === 'over' ? F.inner : (opts.type === 'outside' ? F.wrap : F.outer));
      }
    }
  };

  // jQuery plugin initialization
  $.fn.fancybox = function(options) {
    var opts = options || {},
        selector = this.selector || '';

    function run(e) {
      var group = [];

      e.preventDefault();

      if (this.rel && this.rel !== '' && this.rel !== 'nofollow') {
        group = selector.length ? $(selector).filter('[rel="' + this.rel + '"]') : $('[rel="' + this.rel + '"]');
      }

      if (group.length) {
        opts.index = group.index(this);

        F(group.get(), opts);

      } else {
        F(this, opts);
      }

      return false;
    }

    if (selector) {
      D.undelegate(selector, 'click.fb-start').delegate(selector, 'click.fb-start', run);

    } else {
      $(this).unbind('click.fb-start').bind('click.fb-start', run);
    }
  };
}(window, document, jQuery));
ready
Colorbox
// ColorBox v1.4.0 - a full featured, light-weight, customizable lightbox based on jQuery 1.3+
// Copyright (c) 2011 Jack Moore - jacklmoore.com
// License: http://www.opensource.org/licenses/mit-license.php
;
(function($, document, window) {
  var
  // Default settings object.   
  // See http://jacklmoore.com/colorbox for details.
  defaults = {
    transition: "elastic",
    speed: 300,
    width: false,
    initialWidth: "600",
    innerWidth: false,
    maxWidth: false,
    height: false,
    initialHeight: "450",
    innerHeight: false,
    maxHeight: false,
    scalePhotos: true,
    scrolling: true,
    inline: false,
    html: false,
    iframe: false,
    fastIframe: true,
    photo: false,
    href: false,
    title: false,
    rel: false,
    opacity: 0.9,
    preloading: true,
    current: "image {current} of {total}",
    previous: "previous",
    next: "next",
    close: "close",
    open: false,
    returnFocus: true,
    reposition: true,
    loop: true,
    slideshow: false,
    slideshowAuto: true,
    slideshowSpeed: 2500,
    slideshowStart: "start slideshow",
    slideshowStop: "stop slideshow",
    onOpen: false,
    onLoad: false,
    onComplete: false,
    onCleanup: false,
    onClosed: false,
    overlayClose: true,
    escKey: true,
    arrowKey: true,
    top: false,
    bottom: false,
    left: false,
    right: false,
    fixed: false,
    data: undefined
  },
      
      
      
      
      // Abstracting the HTML and event identifiers for easy rebranding
      colorbox = 'colorbox',
      prefix = 'cbox',
      boxElement = prefix + 'Element',
      
      
      
      
      // Events 
      event_open = prefix + '_open',
      event_load = prefix + '_load',
      event_complete = prefix + '_complete',
      event_cleanup = prefix + '_cleanup',
      event_closed = prefix + '_closed',
      event_purge = prefix + '_purge',
      
      
      
      
      // Special Handling for IE
      isIE = $.browser.msie && !$.support.opacity,
       // Detects IE6,7,8.  IE9 supports opacity.  Feature detection alone gave a false positive on at least one phone browser and on some development versions of Chrome, hence the user-agent test.
      isIE6 = isIE && $.browser.version < 7,
      event_ie6 = prefix + '_IE6',
      
      
      
      
      // Cached jQuery Object Variables
      $overlay, $box, $wrap, $content, $topBorder, $leftBorder, $rightBorder, $bottomBorder, $related, $window, $loaded, $loadingBay, $loadingOverlay, $title, $current, $slideshow, $next, $prev, $close, $groupControls,
      
      
      
      // Variables for cached values or use across multiple functions
      settings, interfaceHeight, interfaceWidth, loadedHeight, loadedWidth, element, index, photo, open, active, closing, loadingTimer, publicMethod, div = "div";

  // ****************
  // HELPER FUNCTIONS
  // ****************
  // Convience function for creating new jQuery objects


  function $tag(tag, id, css) {
    var element = document.createElement(tag);

    if (id) {
      element.id = prefix + id;
    }

    if (css) {
      element.style.cssText = css;
    }

    return $(element);
  }

  // Determine the next and previous members in a group.


  function getIndex(increment) {
    var
    max = $related.length,
        newIndex = (index + increment) % max;

    return (newIndex < 0) ? max + newIndex : newIndex;
  }

  // Convert '%' and 'px' values to integers


  function setSize(size, dimension) {
    return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : $window.height()) / 100) : 1) * parseInt(size, 10));
  }

  // Checks an href to see if it is a photo.
  // There is a force photo option (photo: true) for hrefs that cannot be matched by this regex.


  function isImage(url) {
    return settings.photo || /\.(gif|png|jpe?g|bmp|ico)((#|\?).*)?$/i.test(url);
  }

  // Assigns function results to their respective properties


  function makeSettings() {
    var i;
    settings = $.extend({}, $.data(element, colorbox));

    for (i in settings) {
      if ($.isFunction(settings[i]) && i.slice(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
        settings[i] = settings[i].call(element);
      }
    }

    settings.rel = settings.rel || element.rel || 'nofollow';
    settings.href = settings.href || $(element).attr('href');
    settings.title = settings.title || element.title;

    if (typeof settings.href === "string") {
      settings.href = $.trim(settings.href);
    }
  }

  function trigger(event, callback) {
    $.event.trigger(event);
    if (callback) {
      callback.call(element);
    }
  }

  // Slideshow functionality


  function slideshow() {
    var
    timeOut, className = prefix + "Slideshow_",
        click = "click." + prefix,
        start, stop, clear;

    if (settings.slideshow && $related[1]) {
      start = function() {
        $slideshow.text(settings.slideshowStop).unbind(click).bind(event_complete, function() {
          if (settings.loop || $related[index + 1]) {
            timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
          }
        }).bind(event_load, function() {
          clearTimeout(timeOut);
        }).one(click + ' ' + event_cleanup, stop);
        $box.removeClass(className + "off").addClass(className + "on");
        timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
      };

      stop = function() {
        clearTimeout(timeOut);
        $slideshow.text(settings.slideshowStart).unbind([event_complete, event_load, event_cleanup, click].join(' ')).one(click, function() {
          publicMethod.next();
          start();
        });
        $box.removeClass(className + "on").addClass(className + "off");
      };

      if (settings.slideshowAuto) {
        start();
      } else {
        stop();
      }
    } else {
      $box.removeClass(className + "off " + className + "on");
    }
  }

  function launch(target) {
    if (!closing) {

      element = target;

      makeSettings();

      $related = $(element);

      index = 0;

      if (settings.rel !== 'nofollow') {
        $related = $('.' + boxElement).filter(function() {
          var relRelated = $.data(this, colorbox).rel || this.rel;
          return (relRelated === settings.rel);
        });
        index = $related.index(element);

        // Check direct calls to ColorBox.
        if (index === -1) {
          $related = $related.add(element);
          index = $related.length - 1;
        }
      }

      if (!open) {
        open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
        $box.show();

        if (settings.returnFocus) {
          try {
            element.blur();
            $(element).one(event_closed, function() {
              try {
                this.focus();
              } catch (e) {
                // do nothing
              }
            });
          } catch (e) {
            // do nothing
          }
        }

        // +settings.opacity avoids a problem in IE when using non-zero-prefixed-string-values, like '.5'
        $overlay.css({
          "opacity": +settings.opacity,
          "cursor": settings.overlayClose ? "pointer" : "auto"
        }).show();

        // Opens inital empty ColorBox prior to content being loaded.
        settings.w = setSize(settings.initialWidth, 'x');
        settings.h = setSize(settings.initialHeight, 'y');
        publicMethod.position();

        if (isIE6) {
          $window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function() {
            $overlay.css({
              width: $window.width(),
              height: $window.height(),
              top: $window.scrollTop(),
              left: $window.scrollLeft()
            });
          }).trigger('resize.' + event_ie6);
        }

        trigger(event_open, settings.onOpen);

        $groupControls.add($title).hide();

        $close.html(settings.close).show();
      }

      publicMethod.load(true);
    }
  }

  // ****************
  // PUBLIC FUNCTIONS
  // Usage format: $.fn.colorbox.close();
  // Usage from within an iframe: parent.$.fn.colorbox.close();
  // ****************
  publicMethod = $.fn[colorbox] = $[colorbox] = function(options, callback) {
    var $this = this;

    options = options || {};

    publicMethod.init();

    if (!$this[0]) {
      if ($this.selector) { // if a selector was given and it didn't match any elements, go ahead and exit.
        return $this;
      }
      // if no selector was given (ie. $.colorbox()), create a temporary element to work with
      $this = $('<a/>');
      options.open = true; // assume an immediate open
    }

    if (callback) {
      options.onComplete = callback;
    }

    $this.each(function() {
      $.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options));
    }).addClass(boxElement);

    if (($.isFunction(options.open) && options.open.call($this)) || options.open) {
      launch($this[0]);
    }

    return $this;
  };

  // Initialize ColorBox: store common calculations, preload the interface graphics, append the html.
  // This preps ColorBox for a speedy open when clicked, and minimizes the burdon on the browser by only
  // having to run once, instead of each time colorbox is opened.
  publicMethod.init = function() {
    if (!$box) {

      // If the body is not present yet, wait for DOM ready
      if (!$('body')[0]) {
        $(publicMethod.init);
        return;
      }

      // Create the markup and append to BODY
      $window = $(window);
      $box = $tag(div).attr({
        id: colorbox,
        'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''
      });
      $overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
      $wrap = $tag(div, "Wrapper");
      $content = $tag(div, "Content").append(
      $loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'), $loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic")), $title = $tag(div, "Title"), $current = $tag(div, "Current"), $next = $tag(div, "Next"), $prev = $tag(div, "Previous"), $slideshow = $tag(div, "Slideshow").bind(event_open, slideshow), $close = $tag(div, "Close"));

      $wrap.append( // The 3x3 Grid that makes up ColorBox
      $tag(div).append(
      $tag(div, "TopLeft"), $topBorder = $tag(div, "TopCenter"), $tag(div, "TopRight")), $tag(div, false, 'clear:left').append(
      $leftBorder = $tag(div, "MiddleLeft"), $content, $rightBorder = $tag(div, "MiddleRight")), $tag(div, false, 'clear:left').append(
      $tag(div, "BottomLeft"), $bottomBorder = $tag(div, "BottomCenter"), $tag(div, "BottomRight"))).find('div div').css({
        'float': 'left'
      });

      $loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');

      $('body').append($overlay, $box.append($wrap, $loadingBay));

      // Cache values needed for size calculations
      interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height(); //Subtraction needed for IE6
      interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
      loadedHeight = $loaded.outerHeight(true);
      loadedWidth = $loaded.outerWidth(true);

      // Setting padding to remove the need to do size conversions during the animation step.
      $box.css({
        "padding-bottom": interfaceHeight,
        "padding-right": interfaceWidth
      }).hide();

      // Setup button events.
      // Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
      $next.click(function() {
        publicMethod.next();
      });
      $prev.click(function() {
        publicMethod.prev();
      });
      $close.click(function() {
        publicMethod.close();
      });

      $groupControls = $next.add($prev).add($current).add($slideshow);

      $overlay.click(function() {
        if (settings.overlayClose) {
          publicMethod.close();
        }
      });

      // Set Navigation Key Bindings
      $(document).bind('keydown.' + prefix, function(e) {
        var key = e.keyCode;
        if (open && settings.escKey && key === 27) {
          e.preventDefault();
          publicMethod.close();
        }
        if (open && settings.arrowKey && $related[1]) {
          if (key === 37) {
            e.preventDefault();
            $prev.click();
          } else if (key === 39) {
            e.preventDefault();
            $next.click();
          }
        }
      });
    }
  };

  publicMethod.remove = function() {
    $box.add($overlay).remove();
    $box = null;
    $('.' + boxElement).removeData(colorbox).removeClass(boxElement);
  };

  publicMethod.position = function(speed, loadedCallback) {
    var top = 0,
        left = 0,
        offset = $box.offset();

    $window.unbind('resize.' + prefix);

    // remove the modal so that it doesn't influence the document width/height        
    $box.css({
      top: -99999,
      left: -99999
    });

    if (settings.fixed && !isIE6) {
      $box.css({
        position: 'fixed'
      });
    } else {
      top = $window.scrollTop();
      left = $window.scrollLeft();
      $box.css({
        position: 'absolute'
      });
    }

    // keeps the top and left positions within the browser's viewport.
    if (settings.right !== false) {
      left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0);
    } else if (settings.left !== false) {
      left += setSize(settings.left, 'x');
    } else {
      left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
    }

    if (settings.bottom !== false) {
      top += Math.max($window.height() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0);
    } else if (settings.top !== false) {
      top += setSize(settings.top, 'y');
    } else {
      top += Math.round(Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
    }

    $box.css({
      top: offset.top,
      left: offset.left
    });

    // setting the speed to 0 to reduce the delay between same-sized content.
    speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed || 0;

    // this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
    // but it has to be shrank down around the size of div#colorbox when it's done.  If not,
    // it can invoke an obscure IE bug when using iframes.
    $wrap[0].style.width = $wrap[0].style.height = "9999px";

    function modalDimensions(that) {
      // loading overlay height has to be explicitly set for IE6.
      $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
      $loadingOverlay[0].style.height = $loadingOverlay[1].style.height = $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
    }

    $box.dequeue().animate({
      width: settings.w + loadedWidth,
      height: settings.h + loadedHeight,
      top: top,
      left: left
    }, {
      duration: speed,
      complete: function() {
        modalDimensions(this);

        active = false;

        // shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
        $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
        $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";

        if (settings.reposition) {
          setTimeout(function() { // small delay before binding onresize due to an IE8 bug.
            $window.bind('resize.' + prefix, publicMethod.position);
          }, 1);
        }

        if (loadedCallback) {
          loadedCallback();
        }
      },
      step: function() {
        modalDimensions(this);
      }
    });
  };

  publicMethod.resize = function(options) {
    if (open) {
      options = options || {};

      if (options.width) {
        settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
      }
      if (options.innerWidth) {
        settings.w = setSize(options.innerWidth, 'x');
      }
      $loaded.css({
        width: settings.w
      });

      if (options.height) {
        settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
      }
      if (options.innerHeight) {
        settings.h = setSize(options.innerHeight, 'y');
      }
      if (!options.innerHeight && !options.height) {
        $loaded.css({
          height: "auto"
        });
        settings.h = $loaded.height();
      }
      $loaded.css({
        height: settings.h
      });

      publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
    }
  };

  publicMethod.prep = function(object) {
    if (!open) {
      return;
    }

    var callback, speed = settings.transition === "none" ? 0 : settings.speed;

    $loaded.remove();
    $loaded = $tag(div, 'LoadedContent').append(object);

    function getWidth() {
      settings.w = settings.w || $loaded.width();
      settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
      return settings.w;
    }

    function getHeight() {
      settings.h = settings.h || $loaded.height();
      settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
      return settings.h;
    }

    $loaded.hide().appendTo($loadingBay.show()) // content has to be appended to the DOM for accurate size calculations.
    .css({
      width: getWidth(),
      overflow: settings.scrolling ? 'auto' : 'hidden'
    }).css({
      height: getHeight()
    }) // sets the height independently from the width in case the new width influences the value of height.
    .prependTo($content);

    $loadingBay.hide();

    // 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.
    //$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'});
    $(photo).css({
      'float': 'none'
    });

    // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay.
    if (isIE6) {
      $('select').not($box.find('select')).filter(function() {
        return this.style.visibility !== 'hidden';
      }).css({
        'visibility': 'hidden'
      }).one(event_cleanup, function() {
        this.style.visibility = 'inherit';
      });
    }

    callback = function() {
      var preload, i, total = $related.length,
          iframe, frameBorder = 'frameBorder',
          allowTransparency = 'allowTransparency',
          complete, src, img;

      if (!open) {
        return;
      }

      function removeFilter() {
        if (isIE) {
          $box[0].style.removeAttribute('filter');
        }
      }

      complete = function() {
        clearTimeout(loadingTimer);
        $loadingOverlay.hide();
        trigger(event_complete, settings.onComplete);
      };

      if (isIE) {
        //This fadeIn helps the bicubic resampling to kick-in.
        if (photo) {
          $loaded.fadeIn(100);
        }
      }

      $title.html(settings.title).add($loaded).show();

      if (total > 1) { // handle grouping
        if (typeof settings.current === "string") {
          $current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show();
        }

        $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next);
        $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous);

        if (settings.slideshow) {
          $slideshow.show();
        }

        // Preloads images within a rel group
        if (settings.preloading) {
          preload = [
          getIndex(-1), getIndex(1)];
          while (i = $related[preload.pop()]) {
            src = $.data(i, colorbox).href || i.href;
            if ($.isFunction(src)) {
              src = src.call(i);
            }
            if (isImage(src)) {
              img = new Image();
              img.src = src;
            }
          }
        }
      } else {
        $groupControls.hide();
      }

      if (settings.iframe) {
        iframe = $tag('iframe')[0];

        if (frameBorder in iframe) {
          iframe[frameBorder] = 0;
        }
        if (allowTransparency in iframe) {
          iframe[allowTransparency] = "true";
        }
        // give the iframe a unique name to prevent caching
        iframe.name = prefix + (+new Date());
        if (settings.fastIframe) {
          complete();
        } else {
          $(iframe).one('load', complete);
        }
        iframe.src = settings.href;
        if (!settings.scrolling) {
          iframe.scrolling = "no";
        }
        $(iframe).addClass(prefix + 'Iframe').appendTo($loaded).one(event_purge, function() {
          iframe.src = "//about:blank";
        });
      } else {
        complete();
      }

      if (settings.transition === 'fade') {
        $box.fadeTo(speed, 1, removeFilter);
      } else {
        removeFilter();
      }
    };

    if (settings.transition === 'fade') {
      $box.fadeTo(speed, 0, function() {
        publicMethod.position(0, callback);
      });
    } else {
      publicMethod.position(speed, callback);
    }
  };

  publicMethod.load = function(launched) {
    var href, setResize, prep = publicMethod.prep;

    active = true;

    photo = false;

    element = $related[index];

    if (!launched) {
      makeSettings();
    }

    trigger(event_purge);

    trigger(event_load, settings.onLoad);

    settings.h = settings.height ? setSize(settings.height, 'y') - loadedHeight - interfaceHeight : settings.innerHeight && setSize(settings.innerHeight, 'y');

    settings.w = settings.width ? setSize(settings.width, 'x') - loadedWidth - interfaceWidth : settings.innerWidth && setSize(settings.innerWidth, 'x');

    // Sets the minimum dimensions for use in image scaling
    settings.mw = settings.w;
    settings.mh = settings.h;

    // Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
    // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
    if (settings.maxWidth) {
      settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
      settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
    }
    if (settings.maxHeight) {
      settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
      settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
    }

    href = settings.href;

    loadingTimer = setTimeout(function() {
      $loadingOverlay.show();
    }, 100);

    if (settings.inline) {
      // Inserts an empty placeholder where inline content is being pulled from.
      // An event is bound to put inline content back when ColorBox closes or loads new content.
      $tag(div).hide().insertBefore($(href)[0]).one(event_purge, function() {
        $(this).replaceWith($loaded.children());
      });
      prep($(href));
    } else if (settings.iframe) {
      // IFrame element won't be added to the DOM until it is ready to be displayed,
      // to avoid problems with DOM-ready JS that might be trying to run in that iframe.
      prep(" ");
    } else if (settings.html) {
      prep(settings.html);
    } else if (isImage(href)) {
      $(photo = new Image()).addClass(prefix + 'Photo').error(function() {
        settings.title = false;
        prep($tag(div, 'Error').text('This image could not be loaded'));
      }).load(function() {
        var percent;
        photo.onload = null; //stops animated gifs from firing the onload repeatedly.
        if (settings.scalePhotos) {
          setResize = function() {
            photo.height -= photo.height * percent;
            photo.width -= photo.width * percent;
          };
          if (settings.mw && photo.width > settings.mw) {
            percent = (photo.width - settings.mw) / photo.width;
            setResize();
          }
          if (settings.mh && photo.height > settings.mh) {
            percent = (photo.height - settings.mh) / photo.height;
            setResize();
          }
        }

        if (settings.h) {
          photo.style.marginTop = Math.max(settings.h - photo.height, 0) / 2 + 'px';
        }

        if ($related[1] && (settings.loop || $related[index + 1])) {
          photo.style.cursor = 'pointer';
          photo.onclick = function() {
            publicMethod.next();
          };
        }

        if (isIE) {
          photo.style.msInterpolationMode = 'bicubic';
        }

        setTimeout(function() { // A pause because Chrome will sometimes report a 0 by 0 size otherwise.
          prep(photo);
        }, 1);
      });

      setTimeout(function() { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise.
        photo.src = href;
      }, 1);
    } else if (href) {
      $loadingBay.load(href, settings.data, function(data, status, xhr) {
        prep(status === 'error' ? $tag(div, 'Error').text('Request unsuccessful: ' + xhr.statusText) : $(this).contents());
      });
    }
  };

  // Navigates to the next page/image in a set.
  publicMethod.next = function() {
    if (!active && $related[1] && (settings.loop || $related[index + 1])) {
      index = getIndex(1);
      publicMethod.load();
    }
  };

  publicMethod.prev = function() {
    if (!active && $related[1] && (settings.loop || index)) {
      index = getIndex(-1);
      publicMethod.load();
    }
  };

  // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
  publicMethod.close = function() {
    if (open && !closing) {

      closing = true;

      open = false;

      trigger(event_cleanup, settings.onCleanup);

      $window.unbind('.' + prefix + ' .' + event_ie6);

      $overlay.fadeTo(200, 0);

      $box.stop().fadeTo(300, 0, function() {

        $box.add($overlay).css({
          'opacity': 1,
          cursor: 'auto'
        }).hide();

        trigger(event_purge);

        $loaded.remove();

        setTimeout(function() {
          closing = false;
          trigger(event_closed, settings.onClosed);
        }, 1);
      });
    }
  };

  // A method for fetching the current element ColorBox is referencing.
  // returns a jQuery object.
  publicMethod.element = function() {
    return $(element);
  };

  publicMethod.settings = defaults;

  // Bind the live event before DOM-ready for maximum performance in IE6 & 7.
  $('.' + boxElement, document).live('click', function(e) {
    // ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt.
    // See: http://jacklmoore.com/notes/click-events/
    if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey)) {
      e.preventDefault();
      launch(this);
    }
  });

  // Setup ColorBox
  publicMethod.init();

}(jQuery, document, this));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.