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

JFK
  • 40,963
  • 31
  • 133
  • 306

4 Answers4

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 :

  1. Open the jquery.fancybox-1.3.4.js file (full version, not pack version) with a text/html editor.

  2. 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.

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306
  • 1
    I had the same issue crop up after pulling from the Google Ajax Libraries API CDN at https://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. – JPC Jan 16 '13 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… :/ – zrajm Jul 23 '13 at 20:15
  • 1
    @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. – JFK Jul 23 '13 at 21:47
  • I applied the same solution to lightbox_me 2.3 and it works too. – Adrian Lopez Dec 03 '13 at 02:54
  • 1
    This doesn't fix the problem with opening the FancyBox a second time though... See this sample page here: http://wasen.net/testjq1.10.2.html – Anders Feb 28 '14 at 08:32
  • @Anders : 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](http://stackoverflow.com/a/14355740/1055987). 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](http://stackoverflow.com/a/15580985/1055987). Patches on that answer may be required too. – JFK Mar 26 '14 at 07:07
  • @JFK, yes, I have actually combined the patch and sabel's (http://stackoverflow.com/a/15580985/1055987) answer and now it works fine for jQ 1.10 and above. I still have problems on jQ v2 thuogh... – Anders Mar 26 '14 at 10:25
  • @JFK 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. – Djonatan Jan 28 '15 at 15:56
  • @Djonatan : what version of fancybox? – JFK Jan 28 '15 at 17:54
  • @JFK the old one 1.3.4 – Djonatan Jan 28 '15 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` – basZero Aug 13 '15 at 12:47
  • The proposed fix here is not fixing this issue here: http://stackoverflow.com/questions/20849046/jquery-fancybox-can-only-show-inline-window-once-second-attempt-fails-with-err – basZero Aug 21 '15 at 10:52
  • I tried the patched js file (downloaded [here](http://www.picssel.com/playground/jquery/fancybox/jquery.fancybox-1.3.4_patch.zip)) 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. – basZero Aug 21 '15 at 11:02
  • 1
    @basZero : those are completely different issues. For the one you describe check https://groups.google.com/forum/#!topic/fancybox/-re22BoXOzM if that helps – JFK Aug 21 '15 at 21:01
  • @JFK thanks for the link but the workarond with unwrap did not help. I replaced Fancybox by [Magnific Popup](http://dimsemenov.com/plugins/magnific-popup/) now, also free and works like a charm with jQuery 1.9+ (in my case 1.11). – basZero Aug 24 '15 at 07:15
30

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.

Manu
  • 351
  • 3
  • 3
  • +1 Interesting. In any case we all have to edit our systems to do either rollback version or apply the patch for legacy code. – JFK Jan 16 '13 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 ? – basZero Aug 21 '15 at 10:57
19

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();
sabel
  • 546
  • 6
  • 8
  • 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. – Gurken Papst May 30 '13 at 20:16
  • 1
    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. – Daze Aug 21 '13 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. – glenatron Apr 30 '14 at 11:38
  • 4
    If anyone has trouble applying the patch, here's the file with edits: http://pastebin.com/9R2VFVBQ – dloewen May 01 '14 at 20:54
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.

Robert_QSS
  • 213
  • 1
  • 4
  • 9