Team:SJTU-Software/fancybox.js
From 2014.igem.org
(Created page with "(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,l=e.jQuery,u=e.$,c={},p=[],f="1.10.1",d=p.concat,h=p.push,g=p.slice,m=p.indexOf,y=c.toString,v=c.h...") |
|||
Line 1: | Line 1: | ||
- | + | (function (window, document, $, undefined) { | |
- | + | "use strict"; | |
- | + | ||
+ | var H = $("html"), | ||
+ | W = $(window), | ||
+ | D = $(document), | ||
+ | F = $.fancybox = function () { | ||
+ | F.open.apply( this, arguments ); | ||
+ | }, | ||
+ | IE = navigator.userAgent.match(/msie/i), | ||
+ | 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.5', | ||
+ | |||
+ | defaults: { | ||
+ | padding : 15, | ||
+ | margin : 20, | ||
+ | |||
+ | width : 800, | ||
+ | height : 600, | ||
+ | minWidth : 100, | ||
+ | minHeight : 100, | ||
+ | maxWidth : 9999, | ||
+ | maxHeight : 9999, | ||
+ | pixelRatio: 1, // Set to 2 for retina display support | ||
+ | |||
+ | 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' + (IE ? ' 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(); | ||
+ | |||
+ | D.unbind('.player'); | ||
+ | |||
+ | F.player.isActive = false; | ||
+ | |||
+ | F.trigger('onPlayEnd'); | ||
+ | }, | ||
+ | start = function () { | ||
+ | if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) { | ||
+ | F.player.isActive = true; | ||
+ | |||
+ | D.bind({ | ||
+ | 'onCancel.player beforeClose.player' : stop, | ||
+ | 'onUpdate.player' : set, | ||
+ | '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])) { | ||
+ | F.helpers[helper][event]($.extend(true, {}, F.helpers[helper].defaults, opts), obj); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | D.trigger(event); | ||
+ | }, | ||
+ | |||
+ | isImage: function (str) { | ||
+ | return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/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.opts.pixelRatio; | ||
+ | F.coming.height = this.height / F.opts.pixelRatio; | ||
+ | |||
+ | 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.outerHeight(true); | ||
+ | } | ||
+ | |||
+ | } 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('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 : F._afterZoomIn | ||
+ | }); | ||
+ | } | ||
+ | }, | ||
+ | |||
+ | 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" | ||
+ | el : $('html'), // element that contains "the lock" | ||
+ | |||
+ | // Public methods | ||
+ | create : function(opts) { | ||
+ | opts = $.extend({}, this.defaults, opts); | ||
+ | |||
+ | if (this.overlay) { | ||
+ | this.close(); | ||
+ | } | ||
+ | |||
+ | this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( F.coming ? F.coming.parent : opts.parent ); | ||
+ | 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(); | ||
+ | } | ||
+ | |||
+ | return false; | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | this.overlay.css( opts.css ).show(); | ||
+ | }, | ||
+ | |||
+ | close : function() { | ||
+ | var scrollV, scrollH; | ||
+ | |||
+ | W.unbind('resize.overlay'); | ||
+ | |||
+ | if (this.el.hasClass('fancybox-lock')) { | ||
+ | $('.fancybox-margin').removeClass('fancybox-margin'); | ||
+ | |||
+ | scrollV = W.scrollTop(); | ||
+ | scrollH = W.scrollLeft(); | ||
+ | |||
+ | this.el.removeClass('fancybox-lock'); | ||
+ | |||
+ | W.scrollTop( scrollV ).scrollLeft( scrollH ); | ||
+ | } | ||
+ | |||
+ | $('.fancybox-overlay').remove().hide(); | ||
+ | |||
+ | $.extend(this, { | ||
+ | overlay : null, | ||
+ | fixed : false | ||
+ | }); | ||
+ | }, | ||
+ | |||
+ | // 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 (IE) { | ||
+ | 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) { | ||
+ | var overlay = this.overlay; | ||
+ | |||
+ | $('.fancybox-overlay').stop(true, true); | ||
+ | |||
+ | if (!overlay) { | ||
+ | this.create(opts); | ||
+ | } | ||
+ | |||
+ | if (opts.locked && this.fixed && obj.fixed) { | ||
+ | if (!overlay) { | ||
+ | this.margin = D.height() > W.height() ? $('html').css('margin-right').replace("px", "") : false; | ||
+ | } | ||
+ | |||
+ | obj.locked = this.overlay.append( obj.wrap ); | ||
+ | obj.fixed = false; | ||
+ | } | ||
+ | |||
+ | if (opts.showEarly === true) { | ||
+ | this.beforeShow.apply(this, arguments); | ||
+ | } | ||
+ | }, | ||
+ | |||
+ | beforeShow : function(opts, obj) { | ||
+ | var scrollV, scrollH; | ||
+ | |||
+ | if (obj.locked) { | ||
+ | if (this.margin !== false) { | ||
+ | $('*').filter(function(){ | ||
+ | return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") ); | ||
+ | }).addClass('fancybox-margin'); | ||
+ | |||
+ | this.el.addClass('fancybox-margin'); | ||
+ | } | ||
+ | |||
+ | scrollV = W.scrollTop(); | ||
+ | scrollH = W.scrollLeft(); | ||
+ | |||
+ | this.el.addClass('fancybox-lock'); | ||
+ | |||
+ | W.scrollTop( scrollV ).scrollLeft( scrollH ); | ||
+ | } | ||
+ | |||
+ | 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) { | ||
+ | if (this.overlay && !F.coming) { | ||
+ | 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 (IE) { | ||
+ | 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() { | ||
+ | var w1, w2; | ||
+ | |||
+ | 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') | ||
+ | }); | ||
+ | |||
+ | //Get real width of page scroll-bar | ||
+ | w1 = $(window).width(); | ||
+ | |||
+ | H.addClass('fancybox-lock-test'); | ||
+ | |||
+ | w2 = $(window).width(); | ||
+ | |||
+ | H.removeClass('fancybox-lock-test'); | ||
+ | |||
+ | $("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head"); | ||
+ | }); | ||
+ | |||
+ | }(window, document, jQuery)); |
Latest revision as of 16:50, 7 October 2014
(function (window, document, $, undefined) { "use strict";
var H = $("html"), W = $(window), D = $(document), F = $.fancybox = function () { F.open.apply( this, arguments ); }, IE = navigator.userAgent.match(/msie/i), 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.5',
defaults: { padding : 15, margin : 20,
width : 800, height : 600, minWidth : 100, minHeight : 100, maxWidth : 9999, maxHeight : 9999, pixelRatio: 1, // Set to 2 for retina display support
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 : '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' + (IE ? ' allowtransparency="true"' : ) + '></iframe>',
error : 'The requested content cannot be loaded.
Please try again later.
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>', next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"></a>', prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"></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();
D.unbind('.player');
F.player.isActive = false;
F.trigger('onPlayEnd'); }, start = function () { if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) { F.player.isActive = true;
D.bind({ 'onCancel.player beforeClose.player' : stop, 'onUpdate.player' : set, '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 = $('// 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])) { F.helpers[helper][event]($.extend(true, {}, F.helpers[helper].defaults, opts), obj); } }); }
D.trigger(event); },
isImage: function (str) { return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/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.opts.pixelRatio; F.coming.height = this.height / F.opts.pixelRatio;
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 = $('} else if (isQuery(content)) { if (!content.data(placeholder)) {
content.data(placeholder, $('').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.outerHeight(true); }
} 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('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 : F._afterZoomIn }); } },
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" el : $('html'), // element that contains "the lock"
// Public methods create : function(opts) { opts = $.extend({}, this.defaults, opts);
if (this.overlay) { this.close(); }
this.overlay = $('').appendTo( F.coming ? F.coming.parent : opts.parent );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(); }
return false; } }); }
this.overlay.css( opts.css ).show(); },
close : function() { var scrollV, scrollH;
W.unbind('resize.overlay');
if (this.el.hasClass('fancybox-lock')) { $('.fancybox-margin').removeClass('fancybox-margin');
scrollV = W.scrollTop(); scrollH = W.scrollLeft();
this.el.removeClass('fancybox-lock');
W.scrollTop( scrollV ).scrollLeft( scrollH ); }
$('.fancybox-overlay').remove().hide();
$.extend(this, { overlay : null, fixed : false }); },
// 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 (IE) { 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) { var overlay = this.overlay;
$('.fancybox-overlay').stop(true, true);
if (!overlay) { this.create(opts); }
if (opts.locked && this.fixed && obj.fixed) { if (!overlay) { this.margin = D.height() > W.height() ? $('html').css('margin-right').replace("px", "") : false; }
obj.locked = this.overlay.append( obj.wrap ); obj.fixed = false; }
if (opts.showEarly === true) { this.beforeShow.apply(this, arguments); } },
beforeShow : function(opts, obj) { var scrollV, scrollH;
if (obj.locked) { if (this.margin !== false) { $('*').filter(function(){ return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") ); }).addClass('fancybox-margin');
this.el.addClass('fancybox-margin'); }
scrollV = W.scrollTop(); scrollH = W.scrollLeft();
this.el.addClass('fancybox-lock');
W.scrollTop( scrollV ).scrollLeft( scrollH ); }
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) { if (this.overlay && !F.coming) { 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 = $('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 (IE) { title.width( title.width() ); }
title.wrapInner('');
//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() { var w1, w2;
if ( $.scrollbarWidth === undefined ) { // http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth $.scrollbarWidth = function() {
var parent = $('child = parent.children(), width = child.innerWidth() - child.height( 99 ).innerWidth();
parent.remove();
return width; }; }
if ( $.support.fixedPosition === undefined ) { $.support.fixedPosition = (function() {
var elem = $('').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') });
//Get real width of page scroll-bar w1 = $(window).width();
H.addClass('fancybox-lock-test');
w2 = $(window).width();
H.removeClass('fancybox-lock-test');
$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head"); });
}(window, document, jQuery));