问题
Fancybox breaks with the new jQuery v1.9.0.
It affects both, Fancybox v1.3.4 and below - and - v2.1.3 and below.
The errors shown are :
v1.3.4 :
Timestamp: 15/01/2013 10:03:28 AM
Error: TypeError: b.browser is undefined
Source File: ...fancybox/jquery.fancybox-1.3.4.pack.js
Line: 18
... other errors
Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18
Uncaught TypeError: Object [object Object] has no method 'fancybox'
In v2.1.3 :
Timestamp: 15/01/2013 10:09:58 AM
Error: TypeError: $.browser is undefined
Source File: h.../fancybox2.1.3/jquery.fancybox.js
Line: 139
If you are using this to call jQuery :
<script src="http://code.jquery.com/jquery-latest.js"></script>
... any of your existing fancybox implementations will fail!!
回答1:
It seems like it exists a bug in jQuery reported here : http://bugs.jquery.com/ticket/13183 that breaks the Fancybox script.
Also check https://github.com/fancyapps/fancyBox/issues/485 for further reference.
As a workaround, rollback to jQuery v1.8.3 while either the jQuery bug is fixed or Fancybox is patched.
UPDATE (Jan 16, 2013): Fancybox v2.1.4 has been released and now it works fine with jQuery v1.9.0.
For fancybox v1.3.4- you still need to rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.
UPDATE (Jan 17, 2013): Workaround for users of Fancybox v1.3.4 :
Patch the fancybox js file to make it work with jQuery v1.9.0 as follow :
- Open the jquery.fancybox-1.3.4.js file (full version, not pack version) with a text/html editor.
Find around the line 29 where it says :
isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,and replace it by (EDITED March 19, 2013: more accurate filter):
isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,UPDATE (March 19, 2013): Also replace
$.browser.msiebynavigator.userAgent.match(/msie [6]/i)around line 615 (and/or replace all$.browser.msieinstances, if any), thanks joofow ... that's it!
Or download the already patched version from HERE (UPDATED March 19, 2013 ... thanks fairylee for pointing out the extra closing bracket)
NOTE: this is an unofficial patch and is unsupported by Fancybox's author, however it works as is. You may use it at your own risk ;)
Optionally, you may rather rollback to jQuery v1.8.3 or apply the migration script as pointed out by @Manu's answer.
回答2:
Hi this is due to new version of the jQuery => 1.9.0
you can check the update : http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/
jQuery.Browser is deprecated. you can keep latest version by adding a migration script : http://code.jquery.com/jquery-migrate-1.0.0.js
replace :
<script src="http://code.jquery.com/jquery-latest.js"></script>
by :
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
in your page and its working.
回答3:
Global events are also deprecated.
Here's a patch, which fixes the browser and event issues:
--- jquery.fancybox-1.3.4.js.orig 2010-11-11 23:31:54.000000000 +0100
+++ jquery.fancybox-1.3.4.js 2013-03-22 23:25:29.996796800 +0100
@@ -26,7 +26,9 @@
titleHeight = 0, titleStr = '', start_pos, final_pos, busy = false, fx = $.extend($('<div/>')[0], { prop: 0 }),
- isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,
+ isIE = !+"\v1",
+
+ isIE6 = isIE && window.XMLHttpRequest === undefined,
/*
* Private methods
@@ -322,7 +324,7 @@
loading.hide();
if (wrap.is(":visible") && false === currentOpts.onCleanup(currentArray, currentIndex, currentOpts)) {
- $.event.trigger('fancybox-cancel');
+ $('.fancybox-inline-tmp').trigger('fancybox-cancel');
busy = false;
return;
@@ -389,7 +391,7 @@
content.html( tmp.contents() ).fadeTo(currentOpts.changeFade, 1, _finish);
};
- $.event.trigger('fancybox-change');
+ $('.fancybox-inline-tmp').trigger('fancybox-change');
content
.empty()
@@ -612,7 +614,7 @@
}
if (currentOpts.type == 'iframe') {
- $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + '" frameborder="0" hspace="0" ' + ($.browser.msie ? 'allowtransparency="true""' : '') + ' scrolling="' + selectedOpts.scrolling + '" src="' + currentOpts.href + '"></iframe>').appendTo(content);
+ $('<iframe id="fancybox-frame" name="fancybox-frame' + new Date().getTime() + '" frameborder="0" hspace="0" ' + (isIE ? 'allowtransparency="true""' : '') + ' scrolling="' + selectedOpts.scrolling + '" src="' + currentOpts.href + '"></iframe>').appendTo(content);
}
wrap.show();
@@ -912,7 +914,7 @@
busy = true;
- $.event.trigger('fancybox-cancel');
+ $('.fancybox-inline-tmp').trigger('fancybox-cancel');
_abort();
@@ -957,7 +959,7 @@
title.empty().hide();
wrap.hide();
- $.event.trigger('fancybox-cleanup');
+ $('.fancybox-inline-tmp, select:not(#fancybox-tmp select)').trigger('fancybox-cleanup');
content.empty();
回答4:
In case anyone still has to support legacy fancybox with jQuery 3.0+ here are some other changes you'll have to make:
.unbind() deprecated
Replace all instances of .unbind with .off
.removeAttribute() is not a function
Change lines 580-581 to use jQuery's .removeAttr() instead:
Old code:
580: content[0].style.removeAttribute('filter');
581: wrap[0].style.removeAttribute('filter');
New code:
580: content.removeAttr('filter');
581: wrap.removeAttr('filter');
This combined with the other patch mentioned above solved my compatibility issues.
来源：https://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read