Fancybox is not working properly in Internet Explorer version IE 10 and IE 11

1,739 views
Skip to first unread message

Sonvir Choudhary

unread,
Mar 11, 2016, 5:16:57 AM3/11/16
to FancyBox
Fancybox is not working properly in Internet Explorer version IE 10 and IE 11.
When I click on Image the is not opening in popup box, it is returning following error 
"the requested content cannot be loaded. please try again later".

JFK

unread,
Mar 11, 2016, 8:08:45 PM3/11/16
to FancyBox
There can be many reasons of that error but difficult to guess unless we see your code or a link to the page with the issue
Message has been deleted

Sonvir Choudhary

unread,
Mar 18, 2016, 3:43:28 AM3/18/16
to fanc...@googlegroups.com
here is the code


_loadImage: function() {
            var a = b.imgPreload = new Image;
            a.onload = function() {
                this.onload = this.onerror = null;
                b.coming.width = this.width / b.opts.pixelRatio;
                b.coming.height = this.height / b.opts.pixelRatio;
                b._afterLoad()
            };
            a.onerror = function() {
                this.onload =
                    this.onerror = null;
                b._error("image")
            };
            a.src = b.coming.href;
            !0 !== a.complete && b.showLoading()
        }

On Sat, Mar 12, 2016 at 9:36 PM, Sonvir Choudhary <choudha...@gmail.com> wrote:

I am using Fancybox with Drupal CMS.
It is giving me problem only in IE browsers.

--
You received this message because you are subscribed to a topic in the Google Groups "FancyBox" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fancybox/5zsJM8PryOM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fancybox+u...@googlegroups.com.
To post to this group, send email to fanc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/fancybox/14c9161a-007a-41b3-a7ff-00b7a40b775b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Message has been deleted

Sonvir Choudhary

unread,
Mar 18, 2016, 3:55:26 AM3/18/16
to fanc...@googlegroups.com
after applying console.log

_loadImage: function() {
            var a = b.imgPreload = new Image;
            console.log(a);
            a.onload = function() {
                this.onload = this.onerror = null;
                b.coming.width = this.width / b.opts.pixelRatio;
                b.coming.height = this.height / b.opts.pixelRatio;
                b._afterLoad()
            };
            a.onerror = function() {
                this.onload =
                    this.onerror = null;
                b._error("image")
            };
            a.src = b.coming.href;
            !0 !== a.complete && b.showLoading()
        },

response in chrome 

Inline image 1


reponse in IE 11




On Fri, Mar 18, 2016 at 1:14 PM, Sonvir Choudhary <choudha...@gmail.com> wrote:
in IE it is not entering inside the a.onload function

JFK

unread,
Mar 18, 2016, 8:49:52 PM3/18/16
to FancyBox
In the original file the code is
var img = F.imgPreload = new Image();

what version number?
are you using a customized version?  if so, bear in mind that customized versions and/or third-party plugins for other platforms are not supported, Check with the plugin author
To unsubscribe from this group and all its topics, send an email to fancybox+unsubscribe@googlegroups.com.

Sonvir Choudhary

unread,
Mar 19, 2016, 1:45:26 AM3/19/16
to FancyBox
I am not using custom plugin, there are 2 files are given in library folder, jquery.fancybox.js and jquery.fancybox.pack.js
by default drupal CMS is using second file.
the above code is written in second file.

I am using latest version that is 2.1.5

JFK

unread,
Mar 20, 2016, 9:41:47 PM3/20/16
to FancyBox
There is nothing in the code you posted that indicates what would be the problem
As I mentioned, there can be thousands of reasons but difficult to debug with the information provider .... just beware Fancybox works well with IE9+
Got a link?

Sonvir Choudhary

unread,
Mar 21, 2016, 4:00:44 AM3/21/16
to FancyBox
Below is the full code, I have added console.log in that code on, line number on 930,931 and 930.
I am getting the src path in all browsers except IE9+


here is full code....................
------------------------------------------------------------------------------------------------------------------------

(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 {
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();
                        console.log(img);
                        console.log(F.imgPreload);
                        console.log(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';
}
}

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 ) {
$.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));
------------------------------------------------------------------------------------------------------------------------

 Chrome Output



IE 11 Output



JFK

unread,
Mar 21, 2016, 7:43:03 PM3/21/16
to FancyBox
I am sorry, I do not need the code of fancybox, I know it well ... what I meant is that there may be other factors that voids IE from working and definitively is not the fancybox code (I am not going to help you to debug something doesn't have to be debugged if you what I mean)

Share a link to the page with issue, otherwise I can help you no more
...

Ureka

unread,
Apr 22, 2017, 8:26:06 PM4/22/17
to FancyBox
Hi JFK,

I am also facing the same issue. Fancybox image src is breaking only in IE11 and working fine in all other environments. 
 just click on "Find your serial number" link .  in the opened pop up, alll the images src attribute is getting replaced with some weird  text. only in IE.

I would really appreciate if I get any useful information .

Thanks,
Ureka



 te
Reply all
Reply to author
Forward
0 new messages