Fancybox doesn't work with jQuery v1.9.0 [ f.browser is undefined / Cannot read property 'msie' ]

Asked 15/1, 2013 at 18:23 Answered 13/12, 2017 at 4:34

104

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!!

Alonzoaloof answered 15/1, 2013 at 18:23 Comment(2)

And that's why you should never, ever use jquery-latest.js in production! – Parsaye 15/1, 2013 at 19:20

use latest version of fancybox 2.1.5 fancyapps.com/fancybox – Dekameter 7/10, 2015 at 14:51

204

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.msie by navigator.userAgent.match(/msie [6]/i) around line 615 (and/or replace all $.browser.msie instances, 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.

Alonzoaloof answered 15/1, 2013 at 18:23 Comment(15)

I had the same issue crop up after pulling from the Google Ajax Libraries API CDN at ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. This pulls the latest jQuery release of 1.9.0 and the problem crops up. We pulled down the v1.8.3 release and pointed to it on the local web server and everything is fixed now. Obviously, we'd like to use the CDN but not at the expense of breaking our sliders and hover menus. – Den 16/1, 2013 at 16:33

Why is the regex written /msie [6]/i? -- The character class [6] is exactly equivalent to the character 6, i.e. without the brackets. That doesn't inspire very much confidence in the code… :/ – Margherita 23/7, 2013 at 20:15

@ZrajmCAkfohg : I guess because I normally validate IE versions from 6 to 8 [6-8] and in this case it just went as [6], at the end is just a syntax convention. Anyways, if they are "exactly equivalent", then how does this affect the confidence in the code?!?! If the result with or without brackets was different and that makes room for confusion, then I would agree with you, otherwise I don't see your "...doesn't inspire confidence ..." comment very constructive at all. I would rather encourage you to post your own "confidence-inspiring" answer. – Alonzoaloof 23/7, 2013 at 21:47

I applied the same solution to lightbox_me 2.3 and it works too. – Expostulatory 3/12, 2013 at 2:54

This doesn't fix the problem with opening the FancyBox a second time though... See this sample page here: wasen.net/testjq1.10.2.html – Lovell 28/2, 2014 at 8:32

@Lovell : This answers proposes a patched version of fancybox, which fixes the problem. Your sample page actually uses the migration script as proposed by Manu in his answer. It seems like the issue (using the migration script) only exists with inline content but works fine for images and/or iframes. I guess your best bet is to patch your fancybox v1.3.4 js file. Also check the good answer by sabel. Patches on that answer may be required too. – Alonzoaloof 26/3, 2014 at 7:7

@JFK, yes, I have actually combined the patch and sabel's (https://mcmap.net/q/204618/-fancybox-doesn-39-t-work-with-jquery-v1-9-0-f-browser-is-undefined-cannot-read-property-39-msie-39) answer and now it works fine for jQ 1.10 and above. I still have problems on jQ v2 thuogh... – Lovell 26/3, 2014 at 10:25

@Alonzoaloof thanks for the instructions but my fancybox still doesn't work, using the jQuery 1.11 though, wonder if there's anything else to be done. – Surplus 28/1, 2015 at 15:56

@Surplus : what version of fancybox? – Alonzoaloof 28/1, 2015 at 17:54

@Alonzoaloof the old one 1.3.4 – Surplus 28/1, 2015 at 21:48

I applied this fix, however, it does not solve it. I use jquery-1.11.3, jquery-migrate-1.2.1 and fancybox-1.3.4 – Revue 13/8, 2015 at 12:47

The proposed fix here is not fixing this issue here: #20849546 – Revue 21/8, 2015 at 10:52

I tried the patched js file (downloaded here) but this also does not solve the issue that when fancybox shows the inline HTML for the first time, it removes the inline HTML and breaks when you repeat the fancybox open for a second time. – Revue 21/8, 2015 at 11:2

@Revue : those are completely different issues. For the one you describe check groups.google.com/forum/#!topic/fancybox/-re22BoXOzM if that helps – Alonzoaloof 21/8, 2015 at 21:1

@Alonzoaloof thanks for the link but the workarond with unwrap did not help. I replaced Fancybox by Magnific Popup now, also free and works like a charm with jQuery 1.9+ (in my case 1.11). – Revue 24/8, 2015 at 7:15

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.

Euterpe answered 16/1, 2013 at 10:4 Comment(2)

+1 Interesting. In any case we all have to edit our systems to do either rollback version or apply the patch for legacy code. – Alonzoaloof 16/1, 2013 at 16:54

Applying the patch (jquery-migrate) does not help to solve this issue with fancybox-1.3.4, jquery-1.11.3 and jquery-migrate-1.2.1... Are there any patching solutions to this without the need to upgrade to the non-free Fancybox2 ? – Revue 21/8, 2015 at 10:57

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();

Agata answered 22/3, 2013 at 22:40 Comment(4)

With the patching instructions from JFK's answer alone I had still issues when I tried to open an inline box a second time, always showing the error message "The requested content cannot be loaded. Please try again later." instead of the content, that was properly displayed on the first attempt. Using your (not so obvious) additional patches it finally works. – Trotman 30/5, 2013 at 20:16

Just tried this solution with jQuery 1.10.2 and it seems to work. Although I also agree it's not obvious to understand the "patch" in this answer. – Parasitic 21/8, 2013 at 21:50

This is a great solution for anyone stuck with an old version of Fancybox who needs a new version of JQuery. Fixed some very perplexing bugs that I was running into. – Stagnant 30/4, 2014 at 11:38

If anyone has trouble applying the patch, here's the file with edits: pastebin.com/9R2VFVBQ – Spiritualty 1/5, 2014 at 20:54

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.

Linden answered 13/12, 2017 at 4:34 Comment(1)

How would you fix this statement? b.showNavArrows?((b.cyclic&&1<h.length||0!==s)&&y.show(), (b.cyclic&&1<h.length||s!=h.length-1)&&z.show()):(y.hide(),z.hide())},M=function(){a.support.opacity||(p.get(0).style.removeAttribute("filter"),f.get(0).style.removeAttribute("filter")) – Muddlehead 30/8, 2019 at 7:24

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags