mirror of https://github.com/IoTcat/kayo.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2020 lines
48 KiB
2020 lines
48 KiB
/*! |
|
* fancyBox - jQuery Plugin |
|
* version: 2.1.5 (Fri, 14 Jun 2013) |
|
* @requires jQuery v1.6 or later |
|
* |
|
* Examples at http://fancyapps.com/fancybox/ |
|
* License: www.fancyapps.com/fancybox/#license |
|
* |
|
* Copyright 2012 Janis Skarnelis - janis@fancyapps.com |
|
* |
|
*/ |
|
|
|
(function (window, document, $, undefined) { |
|
"use strict"; |
|
|
|
var 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)); |