Colorbox vs Fancybox (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
Colorbox
// ColorBox v1.3.20.2 - jQuery lightbox plugin
// (c) 2012 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",
                xhrError: "This content failed to load.",
                imgError: "This image failed to load.",

                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 = !$.support.leadingWhitespace, // IE6 to IE8
        isIE6 = isIE && !window.XMLHttpRequest, // IE6
        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",
        init;

        // ****************
        // 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|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i.test(url);
        }

        // Assigns function results to their respective properties
        function makeSettings() {
                var i,
                        data = $.data(element, colorbox);
                
                if (data == null) {
                        settings = $.extend({}, defaults);
                        if (console && console.log) {
                                console.log('Error: cboxElement missing settings object');
                        }
                } else {
                        settings = $.extend({}, data);
                }
                
                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 || $(element).data('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;
                
                if (settings.slideshow && $related[1]) {
                        start = function () {
                                $slideshow
                                        .html(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
                                        .html(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 data = $.data(this, colorbox),
                                                relRelated;

                                        if (data) {
                                                relRelated =  $(this).data('rel') || data.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) {
                                        $(element).blur().one(event_closed, function () {
                                                $(this).focus();
                                        });
                                }
                                
                                // +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);
                }
        }

        // ColorBox's markup needs to be added to the DOM prior to being called
        // so that the browser will go ahead and load the CSS background images.
        function appendHTML() {
                if (!$box && document.body) {
                        init = false;

                        $window = $(window);
                        $box = $tag(div).attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}).hide();
                        $overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
                        $loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic"));
                        $wrap = $tag(div, "Wrapper");
                        $content = $tag(div, "Content").append(
                                $loaded = $tag(div, "LoadedContent", 'width:0; height:0; overflow:hidden'),
                                $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');
                        
                        $groupControls = $next.add($prev).add($current).add($slideshow);

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

        // Add ColorBox's event bindings
        function addBindings() {
                if ($box) {
                        if (!init) {
                                init = true;

                                // 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});

                                // 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();
                                });
                                $overlay.click(function () {
                                        if (settings.overlayClose) {
                                                publicMethod.close();
                                        }
                                });
                                
                                // 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();
                                                }
                                        }
                                });

                                $(document).delegate('.'+boxElement, '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);
                                        }
                                });
                        }
                        return true;
                }
                return false;
        }

        // Don't do anything if ColorBox already exists.
        if ($.colorbox) {
                return;
        }

        // Append the HTML when the DOM loads
        $(appendHTML);


        // ****************
        // 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 || {};
                
                appendHTML();

                if (addBindings()) {
                        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;
        };

        publicMethod.position = function (speed, loadedCallback) {
                var
                css,
                top = 0,
                left = 0,
                offset = $box.offset(),
                scrollTop,
                scrollLeft;
                
                $window.unbind('resize.' + prefix);

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

                scrollTop = $window.scrollTop();
                scrollLeft = $window.scrollLeft();

                if (settings.fixed && !isIE6) {
                        offset.top -= scrollTop;
                        offset.left -= scrollLeft;
                        $box.css({position: 'fixed'});
                } else {
                        top = scrollTop;
                        left = 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) {
                        $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
                        $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
                }

                css = {width: settings.w + loadedWidth, height: settings.h + loadedHeight, top: top, left: left};
                if(speed===0){ // temporary workaround to side-step jQuery-UI 1.8 bug (http://bugs.jquery.com/ticket/12273)
                        $box.css(css);
                }
                $box.dequeue().animate(css, {
                        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,
                                data;
                        
                        if (!open) {
                                return;
                        }
                        
                        function removeFilter() {
                                if (isIE) {
                                        $box[0].style.removeAttribute('filter');
                                }
                        }
                        
                        complete = function () {
                                clearTimeout(loadingTimer);
                                // Detaching forces Andriod stock browser to redraw the area underneat the loading overlay.  Hiding alone isn't enough.
                                $loadingOverlay.detach().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()]) {
                                                data = $.data(i, colorbox);
                                                
                                                if (data && data.href) {
                                                        src = data.href;
                                                        if ($.isFunction(src)) {
                                                                src = src.call(i);
                                                        }
                                                } else {
                                                        src = i.href;
                                                }

                                                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";
                                }

                                if (!settings.scrolling) {
                                        iframe.scrolling = "no";
                                }
                                
                                $(iframe)
                                        .attr({
                                                src: settings.href,
                                                name: (new Date()).getTime(), // give the iframe a unique name to prevent caching
                                                'class': prefix + 'Iframe',
                                                allowFullScreen : true, // allow HTML5 video to go fullscreen
                                                webkitAllowFullScreen : true,
                                                mozallowfullscreen : true
                                        })
                                        .one('load', complete)
                                        .one(event_purge, function () {
                                                iframe.src = "//about:blank";
                                        })
                                        .appendTo($loaded);
                                
                                if (settings.fastIframe) {
                                        $(iframe).trigger('load');
                                }
                        } 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().appendTo($content);
                }, 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')
                        .bind('error',function () {
                                settings.title = false;
                                prep($tag(div, 'Error').html(settings.imgError));
                        })
                        .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) {
                                prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(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);
                        });
                }
        };

        // Removes changes ColorBox made to the document, but does not remove the plugin
        // from jQuery.
        publicMethod.remove = function () {
                $([]).add($box).add($overlay).remove();
                $box = null;
                $('.' + boxElement)
                        .removeData(colorbox)
                        .removeClass(boxElement);

                $(document).undelegate('.'+boxElement);
        };

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

        publicMethod.settings = defaults;

}(jQuery, document, window));
ready
Fancybox
/*!
 * fancyBox - jQuery Plugin
 * version: 2.1.3 (Tue, 23 Oct 2012)
 * @requires jQuery v1.6 or later
 *
 * Examples at http://fancyapps.com/fancybox/
 * License: www.fancyapps.com/fancybox/#license
 *
 * Copyright 2012 Janis Skarnelis - janis@fancyapps.com
 *
 */

(function (window, document, $, undefined) {
        "use strict";

        var W = $(window),
                D = $(document),
                F = $.fancybox = function () {
                        F.open.apply( this, arguments );
                },
                didUpdate = null,
                isTouch   = document.createTouch !== undefined,

                isQuery = function(obj) {
                        return obj && obj.hasOwnProperty && obj instanceof $;
                },
                isString = function(str) {
                        return str && $.type(str) === "string";
                },
                isPercentage = function(str) {
                        return isString(str) && str.indexOf('%') > 0;
                },
                isScrollable = function(el) {
                        return (el && !(el.style.overflow && el.style.overflow === 'hidden') && ((el.clientWidth && el.scrollWidth > el.clientWidth) || (el.clientHeight && el.scrollHeight > el.clientHeight)));
                },
                getScalar = function(orig, dim) {
                        var value = parseInt(orig, 10) || 0;

                        if (dim && isPercentage(orig)) {
                                value = F.getViewport()[ dim ] / 100 * value;
                        }

                        return Math.ceil(value);
                },
                getValue = function(value, dim) {
                        return getScalar(value, dim) + 'px';
                };

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

                defaults: {
                        padding : 15,
                        margin  : 20,

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

                        autoSize   : true,
                        autoHeight : false,
                        autoWidth  : false,

                        autoResize  : true,
                        autoCenter  : !isTouch,
                        fitToView   : true,
                        aspectRatio : false,
                        topRatio    : 0.5,
                        leftRatio   : 0.5,

                        scrolling : 'auto', // 'auto', 'yes' or 'no'
                        wrapCSS   : '',

                        arrows     : true,
                        closeBtn   : true,
                        closeClick : false,
                        nextClick  : false,
                        mouseWheel : true,
                        autoPlay   : false,
                        playSpeed  : 3000,
                        preload    : 3,
                        modal      : false,
                        loop       : true,

                        ajax  : {
                                dataType : 'html',
                                headers  : { 'X-fancyBox': true }
                        },
                        iframe : {
                                scrolling : 'auto',
                                preload   : true
                        },
                        swf : {
                                wmode: 'transparent',
                                allowfullscreen   : 'true',
                                allowscriptaccess : 'always'
                        },

                        keys  : {
                                next : {
                                        13 : 'left', // enter
                                        34 : 'up',   // page down
                                        39 : 'left', // right arrow
                                        40 : 'up'    // down arrow
                                },
                                prev : {
                                        8  : 'right',  // backspace
                                        33 : 'down',   // page up
                                        37 : 'right',  // left arrow
                                        38 : 'down'    // up arrow
                                },
                                close  : [27], // escape key
                                play   : [32], // space - start/stop slideshow
                                toggle : [70]  // letter "f" - toggle fullscreen
                        },

                        direction : {
                                next : 'left',
                                prev : 'right'
                        },

                        scrollOutside  : true,

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

                        // HTML templates
                        tpl: {
                                wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
                                image    : '<img class="fancybox-image" src="{href}" alt="" />',
                                iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
                                error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
                                closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
                                next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
                                prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
                        },

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

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

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

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

                        // Enable default helpers
                        helpers : {
                                overlay : true,
                                title   : true
                        },

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

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

                wrap  : null,
                skin  : 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) {
                        if (!group) {
                                return;
                        }

                        if (!$.isPlainObject(opts)) {
                                opts = {};
                        }

                        // Close if already active
                        if (false === F.close(true)) {
                                return;
                        }

                        // Normalize group
                        if (!$.isArray(group)) {
                                group = isQuery(group) ? $(group).get() : [group];
                        }

                        // Recheck if the type of each element is `object` and set content type (image, ajax, etc)
                        $.each(group, function(i, element) {
                                var obj = {},
                                        href,
                                        title,
                                        content,
                                        type,
                                        rez,
                                        hrefParts,
                                        selector;

                                if ($.type(element) === "object") {
                                        // Check if is DOM element
                                        if (element.nodeType) {
                                                element = $(element);
                                        }

                                        if (isQuery(element)) {
                                                obj = {
                                                        href    : element.data('fancybox-href') || element.attr('href'),
                                                        title   : element.data('fancybox-title') || element.attr('title'),
                                                        isDom   : true,
                                                        element : element
                                                };

                                                if ($.metadata) {
                                                        $.extend(true, obj, element.metadata());
                                                }

                                        } else {
                                                obj = element;
                                        }
                                }

                                href  = opts.href  || obj.href || (isString(element) ? element : null);
                                title = opts.title !== undefined ? opts.title : obj.title || '';

                                content = opts.content || obj.content;
                                type    = content ? 'html' : (opts.type  || obj.type);

                                if (!type && obj.isDom) {
                                        type = element.data('fancybox-type');

                                        if (!type) {
                                                rez  = element.prop('class').match(/fancybox\.(\w+)/);
                                                type = rez ? rez[1] : null;
                                        }
                                }

                                if (isString(href)) {
                                        // Try to guess the content type
                                        if (!type) {
                                                if (F.isImage(href)) {
                                                        type = 'image';

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

                                                } else if (href.charAt(0) === '#') {
                                                        type = 'inline';

                                                } else if (isString(element)) {
                                                        type    = 'html';
                                                        content = element;
                                                }
                                        }

                                        // Split url into two pieces with source url and content selector, e.g,
                                        // "/mypage.html #my_id" will load "/mypage.html" and display element having id "my_id"
                                        if (type === 'ajax') {
                                                hrefParts = href.split(/\s+/, 2);
                                                href      = hrefParts.shift();
                                                selector  = hrefParts.shift();
                                        }
                                }

                                if (!content) {
                                        if (type === 'inline') {
                                                if (href) {
                                                        content = $( isString(href) ? href.replace(/.*(?=#[^\s]+$)/, '') : href ); //strip for ie7

                                                } else if (obj.isDom) {
                                                        content = element;
                                                }

                                        } else if (type === 'html') {
                                                content = href;

                                        } else if (!type && !href && obj.isDom) {
                                                type    = 'inline';
                                                content = element;
                                        }
                                }

                                $.extend(obj, {
                                        href     : href,
                                        type     : type,
                                        content  : content,
                                        title    : title,
                                        selector : selector
                                });

                                group[ i ] = obj;
                        });

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

                        // All options are merged recursive except keys
                        if (opts.keys !== undefined) {
                                F.opts.keys = opts.keys ? $.extend({}, F.defaults.keys, opts.keys) : false;
                        }

                        F.group = group;

                        return F._start(F.opts.index);
                },

                // Cancel image loading or abort ajax request
                cancel: function () {
                        var coming = F.coming;

                        if (!coming || false === F.trigger('onCancel')) {
                                return;
                        }

                        F.hideLoading();

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

                        F.ajaxLoad = null;

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

                        if (coming.wrap) {
                                coming.wrap.stop(true, true).trigger('onReset').remove();
                        }

                        F.coming = null;

                        // If the first item has been canceled, then clear everything
                        if (!F.current) {
                                F._afterZoomOut( coming );
                        }
                },

                // Start closing animation if is open; remove immediately if opening/closing
                close: function (event) {
                        F.cancel();

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

                        F.unbindEvents();

                        if (!F.isActive) {
                                return;
                        }

                        if (!F.isOpen || event === true) {
                                $('.fancybox-wrap').stop(true).trigger('onReset').remove();

                                F._afterZoomOut();

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

                                $('.fancybox-item, .fancybox-nav').remove();

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

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

                // Manage slideshow:
                //   $.fancybox.play(); - toggle slideshow
                //   $.fancybox.play( true ); - start
                //   $.fancybox.play( false ); - stop
                play: function ( action ) {
                        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();

                                        $('body').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;

                                                $('body').bind({
                                                        'afterShow.player onUpdate.player'   : set,
                                                        'onCancel.player beforeClose.player' : stop,
                                                        'beforeLoad.player' : clear
                                                });

                                                set();

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

                        if (action === true || (!F.player.isActive && action !== false)) {
                                start();
                        } else {
                                stop();
                        }
                },

                // Navigate to next gallery item
                next: function ( direction ) {
                        var current = F.current;

                        if (current) {
                                if (!isString(direction)) {
                                        direction = current.direction.next;
                                }

                                F.jumpto(current.index + 1, direction, 'next');
                        }
                },

                // Navigate to previous gallery item
                prev: function ( direction ) {
                        var current = F.current;

                        if (current) {
                                if (!isString(direction)) {
                                        direction = current.direction.prev;
                                }

                                F.jumpto(current.index - 1, direction, 'prev');
                        }
                },

                // Navigate to gallery item by index
                jumpto: function ( index, direction, router ) {
                        var current = F.current;

                        if (!current) {
                                return;
                        }

                        index = getScalar(index);

                        F.direction = direction || current.direction[ (index >= current.index ? 'next' : 'prev') ];
                        F.router    = router || 'jumpto';

                        if (current.loop) {
                                if (index < 0) {
                                        index = current.group.length + (index % current.group.length);
                                }

                                index = index % current.group.length;
                        }

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

                                F._start(index);
                        }
                },

                // Center inside viewport and toggle position type to fixed or absolute if needed
                reposition: function (e, onlyAbsolute) {
                        var current = F.current,
                                wrap    = current ? current.wrap : null,
                                pos;

                        if (wrap) {
                                pos = F._getPosition(onlyAbsolute);

                                if (e && e.type === 'scroll') {
                                        delete pos.position;

                                        wrap.stop(true, true).animate(pos, 200);

                                } else {
                                        wrap.css(pos);

                                        current.pos = $.extend({}, current.dim, pos);
                                }
                        }
                },

                update: function (e) {
                        var type = (e && e.type),
                                anyway = !type || type === 'orientationchange';

                        if (anyway) {
                                clearTimeout(didUpdate);

                                didUpdate = null;
                        }

                        if (!F.isOpen || didUpdate) {
                                return;
                        }

                        didUpdate = setTimeout(function() {
                                var current = F.current;

                                if (!current || F.isClosing) {
                                        return;
                                }

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

                                if (anyway || type === 'load' || (type === 'resize' && current.autoResize)) {
                                        F._setDimension();
                                }

                                if (!(type === 'scroll' && current.canShrink)) {
                                        F.reposition(e);
                                }

                                F.trigger('onUpdate');

                                didUpdate = null;

                        }, (anyway && !isTouch ? 0 : 300));
                },

                // Shrink content to fit inside viewport or restore if resized
                toggle: function ( action ) {
                        if (F.isOpen) {
                                F.current.fitToView = $.type(action) === "boolean" ? action : !F.current.fitToView;

                                // Help browser to restore document dimensions
                                if (isTouch) {
                                        F.wrap.removeAttr('style').addClass('fancybox-tmp');

                                        F.trigger('onUpdate');
                                }

                                F.update();
                        }
                },

                hideLoading: function () {
                        D.unbind('.loading');

                        $('#fancybox-loading').remove();
                },

                showLoading: function () {
                        var el, viewport;

                        F.hideLoading();

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

                        // If user will press the escape-button, the request will be canceled
                        D.bind('keydown.loading', function(e) {
                                if ((e.which || e.keyCode) === 27) {
                                        e.preventDefault();

                                        F.cancel();
                                }
                        });

                        if (!F.defaults.fixed) {
                                viewport = F.getViewport();

                                el.css({
                                        position : 'absolute',
                                        top  : (viewport.h * 0.5) + viewport.y,
                                        left : (viewport.w * 0.5) + viewport.x
                                });
                        }
                },

                getViewport: function () {
                        var locked = (F.current && F.current.locked) || false,
                                rez    = {
                                        x: W.scrollLeft(),
                                        y: W.scrollTop()
                                };

                        if (locked) {
                                rez.w = locked[0].clientWidth;
                                rez.h = locked[0].clientHeight;

                        } else {
                                // See http://bugs.jquery.com/ticket/6724
                                rez.w = isTouch && window.innerWidth  ? window.innerWidth  : W.width();
                                rez.h = isTouch && window.innerHeight ? window.innerHeight : W.height();
                        }

                        return rez;
                },

                // Unbind the keyboard / clicking actions
                unbindEvents: function () {
                        if (F.wrap && isQuery(F.wrap)) {
                                F.wrap.unbind('.fb');
                        }

                        D.unbind('.fb');
                        W.unbind('.fb');
                },

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

                        if (!current) {
                                return;
                        }

                        // Changing document height on iOS devices triggers a 'resize' event,
                        // that can change document height... repeating infinitely
                        W.bind('orientationchange.fb' + (isTouch ? '' : ' resize.fb') + (current.autoCenter && !current.locked ? ' scroll.fb' : ''), F.update);

                        keys = current.keys;

                        if (keys) {
                                D.bind('keydown.fb', function (e) {
                                        var code   = e.which || e.keyCode,
                                                target = e.target || e.srcElement;

                                        // Skip esc key if loading, because showLoading will cancel preloading
                                        if (code === 27 && F.coming) {
                                                return false;
                                        }

                                        // Ignore key combinations and key events within form elements
                                        if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && !(target && (target.type || $(target).is('[contenteditable]')))) {
                                                $.each(keys, function(i, val) {
                                                        if (current.group.length > 1 && val[ code ] !== undefined) {
                                                                F[ i ]( val[ code ] );

                                                                e.preventDefault();
                                                                return false;
                                                        }

                                                        if ($.inArray(code, val) > -1) {
                                                                F[ i ] ();

                                                                e.preventDefault();
                                                                return false;
                                                        }
                                                });
                                        }
                                });
                        }

                        if ($.fn.mousewheel && current.mouseWheel) {
                                F.wrap.bind('mousewheel.fb', function (e, delta, deltaX, deltaY) {
                                        var target = e.target || null,
                                                parent = $(target),
                                                canScroll = false;

                                        while (parent.length) {
                                                if (canScroll || parent.is('.fancybox-skin') || parent.is('.fancybox-wrap')) {
                                                        break;
                                                }

                                                canScroll = isScrollable( parent[0] );
                                                parent    = $(parent).parent();
                                        }

                                        if (delta !== 0 && !canScroll) {
                                                if (F.group.length > 1 && !current.canShrink) {
                                                        if (deltaY > 0 || deltaX > 0) {
                                                                F.prev( deltaY > 0 ? 'down' : 'left' );

                                                        } else if (deltaY < 0 || deltaX < 0) {
                                                                F.next( deltaY < 0 ? 'up' : 'right' );
                                                        }

                                                        e.preventDefault();
                                                }
                                        }
                                });
                        }
                },

                trigger: function (event, o) {
                        var ret, obj = o || F.coming || F.current;

                        if (!obj) {
                                return;
                        }

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

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

                        if (obj.helpers) {
                                $.each(obj.helpers, function (helper, opts) {
                                        if (opts && F.helpers[helper] && $.isFunction(F.helpers[helper][event])) {
                                                opts = $.extend(true, {}, F.helpers[helper].defaults, opts);

                                                F.helpers[helper][event](opts, obj);
                                        }
                                });
                        }

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

                isImage: function (str) {
                        return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp)((\?|#).*)?$)/i);
                },

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

                _start: function (index) {
                        var coming = {},
                                obj,
                                href,
                                type,
                                margin,
                                padding;

                        index = getScalar( index );
                        obj   = F.group[ index ] || null;

                        if (!obj) {
                                return false;
                        }

                        coming = $.extend(true, {}, F.opts, obj);

                        // Convert margin and padding properties to array - top, right, bottom, left
                        margin  = coming.margin;
                        padding = coming.padding;

                        if ($.type(margin) === 'number') {
                                coming.margin = [margin, margin, margin, margin];
                        }

                        if ($.type(padding) === 'number') {
                                coming.padding = [padding, padding, padding, padding];
                        }

                        // 'modal' propery is just a shortcut
                        if (coming.modal) {
                                $.extend(true, coming, {
                                        closeBtn   : false,
                                        closeClick : false,
                                        nextClick  : false,
                                        arrows     : false,
                                        mouseWheel : false,
                                        keys       : null,
                                        helpers: {
                                                overlay : {
                                                        closeClick : false
                                                }
                                        }
                                });
                        }

                        // 'autoSize' property is a shortcut, too
                        if (coming.autoSize) {
                                coming.autoWidth = coming.autoHeight = true;
                        }

                        if (coming.width === 'auto') {
                                coming.autoWidth = true;
                        }

                        if (coming.height === 'auto') {
                                coming.autoHeight = true;
                        }

                        /*
                         * Add reference to the group, so it`s possible to access from callbacks, example:
                         * afterLoad : function() {
                         *     this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                         * }
                         */

                        coming.group  = F.group;
                        coming.index  = index;

                        // 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;
                        }

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

                        if (!type) {
                                F.coming = null;

                                //If we can not determine content type then drop silently or display next/prev item if looping through gallery
                                if (F.current && F.router && F.router !== 'jumpto') {
                                        F.current.index = index;

                                        return F[ F.router ]( F.direction );
                                }

                                return false;
                        }

                        F.isActive = true;

                        if (type === 'image' || type === 'swf') {
                                coming.autoHeight = coming.autoWidth = false;
                                coming.scrolling  = 'visible';
                        }

                        if (type === 'image') {
                                coming.aspectRatio = true;
                        }

                        if (type === 'iframe' && isTouch) {
                                coming.scrolling = 'scroll';
                        }

                        // Build the neccessary markup
                        coming.wrap = $(coming.tpl.wrap).addClass('fancybox-' + (isTouch ? 'mobile' : 'desktop') + ' fancybox-type-' + type + ' fancybox-tmp ' + coming.wrapCSS).appendTo( coming.parent || 'body' );

                        $.extend(coming, {
                                skin  : $('.fancybox-skin',  coming.wrap),
                                outer : $('.fancybox-outer', coming.wrap),
                                inner : $('.fancybox-inner', coming.wrap)
                        });

                        $.each(["Top", "Right", "Bottom", "Left"], function(i, v) {
                                coming.skin.css('padding' + v, getValue(coming.padding[ i ]));
                        });

                        F.trigger('onReady');

                        // Check before try to load; 'inline' and 'html' types need content, others - href
                        if (type === 'inline' || type === 'html') {
                                if (!coming.content || !coming.content.length) {
                                        return F._error( 'content' );
                                }

                        } else if (!href) {
                                return F._error( 'href' );
                        }

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

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

                        } else if (type === 'iframe') {
                                F._loadIframe();

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

                _error: function ( type ) {
                        $.extend(F.coming, {
                                type       : 'html',
                                autoWidth  : true,
                                autoHeight : true,
                                minWidth   : 0,
                                minHeight  : 0,
                                scrolling  : 'no',
                                hasError   : type,
                                content    : F.coming.tpl.error
                        });

                        F._afterLoad();
                },

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

                        img.onload = function () {
                                this.onload = this.onerror = null;

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

                                F._afterLoad();
                        };

                        img.onerror = function () {
                                this.onload = this.onerror = null;

                                F._error( 'image' );
                        };

                        img.src = F.coming.href;

                        if (img.complete !== true) {
                                F.showLoading();
                        }
                },

                _loadAjax: function () {
                        var coming = F.coming;

                        F.showLoading();

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

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

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

                _loadIframe: function() {
                        var coming = F.coming,
                                iframe = $(coming.tpl.iframe.replace(/\{rnd\}/g, new Date().getTime()))
                                        .attr('scrolling', isTouch ? 'auto' : coming.iframe.scrolling)
                                        .attr('src', coming.href);

                        // This helps IE
                        $(coming.wrap).bind('onReset', function () {
                                try {
                                        $(this).find('iframe').hide().attr('src', '//about:blank').end().empty();
                                } catch (e) {}
                        });

                        if (coming.iframe.preload) {
                                F.showLoading();

                                iframe.one('load', function() {
                                        $(this).data('ready', 1);

                                        // iOS will lose scrolling if we resize
                                        if (!isTouch) {
                                                $(this).bind('load.fb', F.update);
                                        }

                                        // Without this trick:
                                        //   - iframe won't scroll on iOS devices
                                        //   - IE7 sometimes displays empty iframe
                                        $(this).parents('.fancybox-wrap').width('100%').removeClass('fancybox-tmp').show();

                                        F._afterLoad();
                                });
                        }

                        coming.content = iframe.appendTo( coming.inner );

                        if (!coming.iframe.preload) {
                                F._afterLoad();
                        }
                },

                _preloadImages: function() {
                        var group   = F.group,
                                current = F.current,
                                len     = group.length,
                                cnt     = current.preload ? Math.min(current.preload, len - 1) : 0,
                                item,
                                i;

                        for (i = 1; i <= cnt; i += 1) {
                                item = group[ (current.index + i ) % len ];

                                if (item.type === 'image' && item.href) {
                                        new Image().src = item.href;
                                }
                        }
                },

                _afterLoad: function () {
                        var coming   = F.coming,
                                previous = F.current,
                                placeholder = 'fancybox-placeholder',
                                current,
                                content,
                                type,
                                scrolling,
                                href,
                                embed;

                        F.hideLoading();

                        if (!coming || F.isActive === false) {
                                return;
                        }

                        if (false === F.trigger('afterLoad', coming, previous)) {
                                coming.wrap.stop(true).trigger('onReset').remove();

                                F.coming = null;

                                return;
                        }

                        if (previous) {
                                F.trigger('beforeChange', previous);

                                previous.wrap.stop(true).removeClass('fancybox-opened')
                                        .find('.fancybox-item, .fancybox-nav')
                                        .remove();
                        }

                        F.unbindEvents();

                        current   = coming;
                        content   = coming.content;
                        type      = coming.type;
                        scrolling = coming.scrolling;

                        $.extend(F, {
                                wrap  : current.wrap,
                                skin  : current.skin,
                                outer : current.outer,
                                inner : current.inner,
                                current  : current,
                                previous : previous
                        });

                        href = current.href;

                        switch (type) {
                                case 'inline':
                                case 'ajax':
                                case 'html':
                                        if (current.selector) {
                                                content = $('<div>').html(content).find(current.selector);

                                        } else if (isQuery(content)) {
                                                if (!content.data(placeholder)) {
                                                        content.data(placeholder, $('<div class="' + placeholder + '"></div>').insertAfter( content ).hide() );
                                                }

                                                content = content.show().detach();

                                                current.wrap.bind('onReset', function () {
                                                        if ($(this).find(content).length) {
                                                                content.hide().replaceAll( content.data(placeholder) ).data(placeholder, false);
                                                        }
                                                });
                                        }
                                break;

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

                                case 'swf':
                                        content = '<object id="fancybox-swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="movie" value="' + href + '"></param>';
                                        embed   = '';

                                        $.each(current.swf, function(name, val) {
                                                content += '<param name="' + name + '" value="' + val + '"></param>';
                                                embed   += ' ' + name + '="' + val + '"';
                                        });

                                        content += '<embed src="' + href + '" type="application/x-shockwave-flash" width="100%" height="100%"' + embed + '></embed></object>';
                                break;
                        }

                        if (!(isQuery(content) && content.parent().is(current.inner))) {
                                current.inner.append( content );
                        }

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

                        // Set scrolling before calculating dimensions
                        current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling));

                        // Set initial dimensions and start position
                        F._setDimension();

                        F.reposition();

                        F.isOpen = false;
                        F.coming = null;

                        F.bindEvents();

                        if (!F.isOpened) {
                                $('.fancybox-wrap').not( current.wrap ).stop(true).trigger('onReset').remove();

                        } else if (previous.prevMethod) {
                                F.transitions[ previous.prevMethod ]();
                        }

                        F.transitions[ F.isOpened ? current.nextMethod : current.openMethod ]();

                        F._preloadImages();
                },

                _setDimension: function () {
                        var viewport   = F.getViewport(),
                                steps      = 0,
                                canShrink  = false,
                                canExpand  = false,
                                wrap       = F.wrap,
                                skin       = F.skin,
                                inner      = F.inner,
                                current    = F.current,
                                width      = current.width,
                                height     = current.height,
                                minWidth   = current.minWidth,
                                minHeight  = current.minHeight,
                                maxWidth   = current.maxWidth,
                                maxHeight  = current.maxHeight,
                                scrolling  = current.scrolling,
                                scrollOut  = current.scrollOutside ? current.scrollbarWidth : 0,
                                margin     = current.margin,
                                wMargin    = getScalar(margin[1] + margin[3]),
                                hMargin    = getScalar(margin[0] + margin[2]),
                                wPadding,
                                hPadding,
                                wSpace,
                                hSpace,
                                origWidth,
                                origHeight,
                                origMaxWidth,
                                origMaxHeight,
                                ratio,
                                width_,
                                height_,
                                maxWidth_,
                                maxHeight_,
                                iframe,
                                body;

                        // Reset dimensions so we could re-check actual size
                        wrap.add(skin).add(inner).width('auto').height('auto').removeClass('fancybox-tmp');

                        wPadding = getScalar(skin.outerWidth(true)  - skin.width());
                        hPadding = getScalar(skin.outerHeight(true) - skin.height());

                        // Any space between content and viewport (margin, padding, border, title)
                        wSpace = wMargin + wPadding;
                        hSpace = hMargin + hPadding;

                        origWidth  = isPercentage(width)  ? (viewport.w - wSpace) * getScalar(width)  / 100 : width;
                        origHeight = isPercentage(height) ? (viewport.h - hSpace) * getScalar(height) / 100 : height;

                        if (current.type === 'iframe') {
                                iframe = current.content;

                                if (current.autoHeight && iframe.data('ready') === 1) {
                                        try {
                                                if (iframe[0].contentWindow.document.location) {
                                                        inner.width( origWidth ).height(9999);

                                                        body = iframe.contents().find('body');

                                                        if (scrollOut) {
                                                                body.css('overflow-x', 'hidden');
                                                        }

                                                        origHeight = body.height();
                                                }

                                        } catch (e) {}
                                }

                        } else if (current.autoWidth || current.autoHeight) {
                                inner.addClass( 'fancybox-tmp' );

                                // Set width or height in case we need to calculate only one dimension
                                if (!current.autoWidth) {
                                        inner.width( origWidth );
                                }

                                if (!current.autoHeight) {
                                        inner.height( origHeight );
                                }

                                if (current.autoWidth) {
                                        origWidth = inner.width();
                                }

                                if (current.autoHeight) {
                                        origHeight = inner.height();
                                }

                                inner.removeClass( 'fancybox-tmp' );
                        }

                        width  = getScalar( origWidth );
                        height = getScalar( origHeight );

                        ratio  = origWidth / origHeight;

                        // Calculations for the content
                        minWidth  = getScalar(isPercentage(minWidth) ? getScalar(minWidth, 'w') - wSpace : minWidth);
                        maxWidth  = getScalar(isPercentage(maxWidth) ? getScalar(maxWidth, 'w') - wSpace : maxWidth);

                        minHeight = getScalar(isPercentage(minHeight) ? getScalar(minHeight, 'h') - hSpace : minHeight);
                        maxHeight = getScalar(isPercentage(maxHeight) ? getScalar(maxHeight, 'h') - hSpace : maxHeight);

                        // These will be used to determine if wrap can fit in the viewport
                        origMaxWidth  = maxWidth;
                        origMaxHeight = maxHeight;

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

                        maxWidth_  = viewport.w - wMargin;
                        maxHeight_ = viewport.h - hMargin;

                        if (current.aspectRatio) {
                                if (width > maxWidth) {
                                        width  = maxWidth;
                                        height = getScalar(width / ratio);
                                }

                                if (height > maxHeight) {
                                        height = maxHeight;
                                        width  = getScalar(height * ratio);
                                }

                                if (width < minWidth) {
                                        width  = minWidth;
                                        height = getScalar(width / ratio);
                                }

                                if (height < minHeight) {
                                        height = minHeight;
                                        width  = getScalar(height * ratio);
                                }

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

                                if (current.autoHeight && current.type !== 'iframe') {
                                        inner.width( width );

                                        height = inner.height();
                                }

                                height = Math.max(minHeight, Math.min(height, maxHeight));
                        }

                        // Try to fit inside viewport (including the title)
                        if (current.fitToView) {
                                inner.width( width ).height( height );

                                wrap.width( width + wPadding );

                                // Real wrap dimensions
                                width_  = wrap.width();
                                height_ = wrap.height();

                                if (current.aspectRatio) {
                                        while ((width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight) {
                                                if (steps++ > 19) {
                                                        break;
                                                }

                                                height = Math.max(minHeight, Math.min(maxHeight, height - 10));
                                                width  = getScalar(height * ratio);

                                                if (width < minWidth) {
                                                        width  = minWidth;
                                                        height = getScalar(width / ratio);
                                                }

                                                if (width > maxWidth) {
                                                        width  = maxWidth;
                                                        height = getScalar(width / ratio);
                                                }

                                                inner.width( width ).height( height );

                                                wrap.width( width + wPadding );

                                                width_  = wrap.width();
                                                height_ = wrap.height();
                                        }

                                } else {
                                        width  = Math.max(minWidth,  Math.min(width,  width  - (width_  - maxWidth_)));
                                        height = Math.max(minHeight, Math.min(height, height - (height_ - maxHeight_)));
                                }
                        }

                        if (scrollOut && scrolling === 'auto' && height < origHeight && (width + wPadding + scrollOut) < maxWidth_) {
                                width += scrollOut;
                        }

                        inner.width( width ).height( height );

                        wrap.width( width + wPadding );

                        width_  = wrap.width();
                        height_ = wrap.height();

                        canShrink = (width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight;
                        canExpand = current.aspectRatio ? (width < origMaxWidth && height < origMaxHeight && width < origWidth && height < origHeight) : ((width < origMaxWidth || height < origMaxHeight) && (width < origWidth || height < origHeight));

                        $.extend(current, {
                                dim : {
                                        width   : getValue( width_ ),
                                        height  : getValue( height_ )
                                },
                                origWidth  : origWidth,
                                origHeight : origHeight,
                                canShrink  : canShrink,
                                canExpand  : canExpand,
                                wPadding   : wPadding,
                                hPadding   : hPadding,
                                wrapSpace  : height_ - skin.outerHeight(true),
                                skinSpace  : skin.height() - height
                        });

                        if (!iframe && current.autoHeight && height > minHeight && height < maxHeight && !canExpand) {
                                inner.height('auto');
                        }
                },

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

                        if (current.autoCenter && current.fixed && !onlyAbsolute && height <= viewport.h && width <= viewport.w) {
                                rez.position = 'fixed';

                        } else if (!current.locked) {
                                rez.top  += viewport.y;
                                rez.left += viewport.x;
                        }

                        rez.top  = getValue(Math.max(rez.top,  rez.top  + ((viewport.h - height) * current.topRatio)));
                        rez.left = getValue(Math.max(rez.left, rez.left + ((viewport.w - width)  * current.leftRatio)));

                        return rez;
                },

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

                        if (!current) {
                                return;
                        }

                        F.isOpen = F.isOpened = true;

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

                        F.update();

                        // Assign a click event
                        if ( current.closeClick || (current.nextClick && F.group.length > 1) ) {
                                F.inner.css('cursor', 'pointer').bind('click.fb', function(e) {
                                        if (!$(e.target).is('a') && !$(e.target).parent().is('a')) {
                                                e.preventDefault();

                                                F[ current.closeClick ? 'close' : 'next' ]();
                                        }
                                });
                        }

                        // Create a close button
                        if (current.closeBtn) {
                                $(current.tpl.closeBtn).appendTo(F.skin).bind( isTouch ? 'touchstart.fb' : 'click.fb', function(e) {
                                        e.preventDefault();

                                        F.close();
                                });
                        }

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

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

                        F.trigger('afterShow');

                        // Stop the slideshow if this is the last item
                        if (!current.loop && current.index === current.group.length - 1) {
                                F.play( false );

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

                                F.play();
                        }
                },

                _afterZoomOut: function ( obj ) {
                        obj = obj || F.current;

                        $('.fancybox-wrap').trigger('onReset').remove();

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

                        F.trigger('afterClose', obj);
                }
        });

        /*
         *      Default transitions
         */

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

                        if (!orig && current.isDom && element.is(':visible')) {
                                orig = element.find('img:first');

                                if (!orig.length) {
                                        orig = element;
                                }
                        }

                        if (isQuery(orig)) {
                                pos = orig.offset();

                                if (orig.is('img')) {
                                        width  = orig.outerWidth();
                                        height = orig.outerHeight();
                                }

                        } else {
                                pos.top  = viewport.y + (viewport.h - height) * current.topRatio;
                                pos.left = viewport.x + (viewport.w - width)  * current.leftRatio;
                        }

                        if (F.wrap.css('position') === 'fixed' || current.locked) {
                                pos.top  -= viewport.y;
                                pos.left -= viewport.x;
                        }

                        pos = {
                                top     : getValue(pos.top  - hPadding * current.topRatio),
                                left    : getValue(pos.left - wPadding * current.leftRatio),
                                width   : getValue(width  + wPadding),
                                height  : getValue(height + hPadding)
                        };

                        return pos;
                },

                step: function (now, fx) {
                        var ratio,
                                padding,
                                value,
                                prop       = fx.prop,
                                current    = F.current,
                                wrapSpace  = current.wrapSpace,
                                skinSpace  = current.skinSpace;

                        if (prop === 'width' || prop === 'height') {
                                ratio = fx.end === fx.start ? 1 : (now - fx.start) / (fx.end - fx.start);

                                if (F.isClosing) {
                                        ratio = 1 - ratio;
                                }

                                padding = prop === 'width' ? current.wPadding : current.hPadding;
                                value   = now - padding;

                                F.skin[ prop ](  getScalar( prop === 'width' ?  value : value - (wrapSpace * ratio) ) );
                                F.inner[ prop ]( getScalar( prop === 'width' ?  value : value - (wrapSpace * ratio) - (skinSpace * ratio) ) );
                        }
                },

                zoomIn: function () {
                        var current  = F.current,
                                startPos = current.pos,
                                effect   = current.openEffect,
                                elastic  = effect === 'elastic',
                                endPos   = $.extend({opacity : 1}, startPos);

                        // Remove "position" property that breaks older IE
                        delete endPos.position;

                        if (elastic) {
                                startPos = this.getOrigPosition();

                                if (current.openOpacity) {
                                        startPos.opacity = 0.1;
                                }

                        } else if (effect === 'fade') {
                                startPos.opacity = 0.1;
                        }

                        F.wrap.css(startPos).animate(endPos, {
                                duration : effect === 'none' ? 0 : current.openSpeed,
                                easing   : current.openEasing,
                                step     : elastic ? this.step : null,
                                complete : F._afterZoomIn
                        });
                },

                zoomOut: function () {
                        var current  = F.current,
                                effect   = current.closeEffect,
                                elastic  = effect === 'elastic',
                                endPos   = {opacity : 0.1};

                        if (elastic) {
                                endPos = this.getOrigPosition();

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

                        F.wrap.animate(endPos, {
                                duration : effect === 'none' ? 0 : current.closeSpeed,
                                easing   : current.closeEasing,
                                step     : elastic ? this.step : null,
                                complete : F._afterZoomOut
                        });
                },

                changeIn: function () {
                        var current   = F.current,
                                effect    = current.nextEffect,
                                startPos  = current.pos,
                                endPos    = { opacity : 1 },
                                direction = F.direction,
                                distance  = 200,
                                field;

                        startPos.opacity = 0.1;

                        if (effect === 'elastic') {
                                field = direction === 'down' || direction === 'up' ? 'top' : 'left';

                                if (direction === 'down' || direction === 'right') {
                                        startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance);
                                        endPos[ field ]   = '+=' + distance + 'px';

                                } else {
                                        startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance);
                                        endPos[ field ]   = '-=' + distance + 'px';
                                }
                        }

                        // Workaround for http://bugs.jquery.com/ticket/12273
                        if (effect === 'none') {
                                F._afterZoomIn();

                        } else {
                                F.wrap.css(startPos).animate(endPos, {
                                        duration : current.nextSpeed,
                                        easing   : current.nextEasing,
                                        complete : function() {
                                                // This helps FireFox to properly render the box
                                                setTimeout(F._afterZoomIn, 20);
                                        }
                                });
                        }
                },

                changeOut: function () {
                        var previous  = F.previous,
                                effect    = previous.prevEffect,
                                endPos    = { opacity : 0.1 },
                                direction = F.direction,
                                distance  = 200;

                        if (effect === 'elastic') {
                                endPos[ direction === 'down' || direction === 'up' ? 'top' : 'left' ] = ( direction === 'up' || direction === 'left' ? '-' : '+' ) + '=' + distance + 'px';
                        }

                        previous.wrap.animate(endPos, {
                                duration : effect === 'none' ? 0 : previous.prevSpeed,
                                easing   : previous.prevEasing,
                                complete : function () {
                                        $(this).trigger('onReset').remove();
                                }
                        });
                }
        };

        /*
         *      Overlay helper
         */

        F.helpers.overlay = {
                defaults : {
                        closeClick : true,  // if true, fancyBox will be closed when user clicks on the overlay
                        speedOut   : 200,   // duration of fadeOut animation
                        showEarly  : true,  // indicates if should be opened immediately or wait until the content is ready
                        css        : {},    // custom CSS properties
                        locked     : !isTouch,  // if true, the content will be locked into overlay
                        fixed      : true   // if false, the overlay CSS position property will not be set to "fixed"
                },

                overlay : null,   // current handle
                fixed   : false,  // indicates if the overlay has position "fixed"

                // Public methods
                create : function(opts) {
                        opts = $.extend({}, this.defaults, opts);

                        if (this.overlay) {
                                this.close();
                        }

                        this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( 'body' );
                        this.fixed   = false;

                        if (opts.fixed && F.defaults.fixed) {
                                this.overlay.addClass('fancybox-overlay-fixed');

                                this.fixed = true;
                        }
                },

                open : function(opts) {
                        var that = this;

                        opts = $.extend({}, this.defaults, opts);

                        if (this.overlay) {
                                this.overlay.unbind('.overlay').width('auto').height('auto');

                        } else {
                                this.create(opts);
                        }

                        if (!this.fixed) {
                                W.bind('resize.overlay', $.proxy( this.update, this) );

                                this.update();
                        }

                        if (opts.closeClick) {
                                this.overlay.bind('click.overlay', function(e) {
                                        if ($(e.target).hasClass('fancybox-overlay')) {
                                                if (F.isActive) {
                                                        F.close();
                                                } else {
                                                        that.close();
                                                }
                                        }
                                });
                        }

                        this.overlay.css( opts.css ).show();
                },

                close : function() {
                        $('.fancybox-overlay').remove();

                        W.unbind('resize.overlay');

                        this.overlay = null;

                        if (this.margin !== false) {
                                $('body').css('margin-right', this.margin);

                                this.margin = false;
                        }

                        if (this.el) {
                                this.el.removeClass('fancybox-lock');
                        }
                },

                // Private, callbacks

                update : function () {
                        var width = '100%', offsetWidth;

                        // Reset width/height so it will not mess
                        this.overlay.width(width).height('100%');

                        // jQuery does not return reliable result for IE
                        if ($.browser.msie) {
                                offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);

                                if (D.width() > offsetWidth) {
                                        width = D.width();
                                }

                        } else if (D.width() > W.width()) {
                                width = D.width();
                        }

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

                // This is where we can manipulate DOM, because later it would cause iframes to reload
                onReady : function (opts, obj) {
                        $('.fancybox-overlay').stop(true, true);

                        if (!this.overlay) {
                                this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false;
                                this.el     = document.all && !document.querySelector ? $('html') : $('body');

                                this.create(opts);
                        }

                        if (opts.locked && this.fixed) {
                                obj.locked = this.overlay.append( obj.wrap );
                                obj.fixed  = false;
                        }

                        if (opts.showEarly === true) {
                                this.beforeShow.apply(this, arguments);
                        }
                },

                beforeShow : function(opts, obj) {
                        if (obj.locked) {
                                this.el.addClass('fancybox-lock');

                                if (this.margin !== false) {
                                        $('body').css('margin-right', getScalar( this.margin ) + obj.scrollbarWidth);
                                }
                        }

                        this.open(opts);
                },

                onUpdate : function() {
                        if (!this.fixed) {
                                this.update();
                        }
                },

                afterClose: function (opts) {
                        // Remove overlay if exists and fancyBox is not opening
                        // (e.g., it is not being open using afterClose callback)
                        if (this.overlay && !F.isActive) {
                                this.overlay.fadeOut(opts.speedOut, $.proxy( this.close, this ));
                        }
                }
        };

        /*
         *      Title helper
         */

        F.helpers.title = {
                defaults : {
                        type     : 'float', // 'float', 'inside', 'outside' or 'over',
                        position : 'bottom' // 'top' or 'bottom'
                },

                beforeShow: function (opts) {
                        var current = F.current,
                                text    = current.title,
                                type    = opts.type,
                                title,
                                target;

                        if ($.isFunction(text)) {
                                text = text.call(current.element, current);
                        }

                        if (!isString(text) || $.trim(text) === '') {
                                return;
                        }

                        title = $('<div class="fancybox-title fancybox-title-' + type + '-wrap">' + text + '</div>');

                        switch (type) {
                                case 'inside':
                                        target = F.skin;
                                break;

                                case 'outside':
                                        target = F.wrap;
                                break;

                                case 'over':
                                        target = F.inner;
                                break;

                                default: // 'float'
                                        target = F.skin;

                                        title.appendTo('body');

                                        if ($.browser.msie) {
                                                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( getScalar(title.css('margin-bottom')) );
                                break;
                        }

                        title[ (opts.position === 'top' ? 'prependTo'  : 'appendTo') ](target);
                }
        };

        // jQuery plugin initialization
        $.fn.fancybox = function (options) {
                var index,
                        that     = $(this),
                        selector = this.selector || '',
                        run      = function(e) {
                                var what = $(this).blur(), idx = index, relType, relVal;

                                if (!(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) && !what.is('.fancybox-wrap')) {
                                        relType = options.groupAttr || 'data-fancybox-group';
                                        relVal  = what.attr(relType);

                                        if (!relVal) {
                                                relType = 'rel';
                                                relVal  = what.get(0)[ relType ];
                                        }

                                        if (relVal && relVal !== '' && relVal !== 'nofollow') {
                                                what = selector.length ? $(selector) : that;
                                                what = what.filter('[' + relType + '="' + relVal + '"]');
                                                idx  = what.index(this);
                                        }

                                        options.index = idx;

                                        // Stop an event from bubbling if everything is fine
                                        if (F.open(what, options) !== false) {
                                                e.preventDefault();
                                        }
                                }
                        };

                options = options || {};
                index   = options.index || 0;

                if (!selector || options.live === false) {
                        that.unbind('click.fb-start').bind('click.fb-start', run);

                } else {
                        D.undelegate(selector, 'click.fb-start').delegate(selector + ":not('.fancybox-item, .fancybox-nav')", 'click.fb-start', run);
                }

                this.filter('[data-fancybox-start=1]').trigger('click');

                return this;
        };

        // Tests that need a body at doc ready
        D.ready(function() {
                if ( $.scrollbarWidth === undefined ) {
                        // http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
                        $.scrollbarWidth = function() {
                                var parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body'),
                                        child  = parent.children(),
                                        width  = child.innerWidth() - child.height( 99 ).innerWidth();

                                parent.remove();

                                return width;
                        };
                }

                if ( $.support.fixedPosition === undefined ) {
                        $.support.fixedPosition = (function() {
                                var elem  = $('<div style="position:fixed;top:20px;"></div>').appendTo('body'),
                                        fixed = ( elem[0].offsetTop === 20 || elem[0].offsetTop === 15 );

                                elem.remove();

                                return fixed;
                        }());
                }

                $.extend(F.defaults, {
                        scrollbarWidth : $.scrollbarWidth(),
                        fixed  : $.support.fixedPosition,
                        parent : $('body')
                });
        });

}(window, document, jQuery));
ready

Revisions

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