Fancybox is not a function

Question

Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?

$("<a href=\"#showmap\">Map</a>").fancybox is not a function

I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.

This is my code

abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.

ex: abbr>>east and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.

function showMapFancybox(abbr){
    var abbr;
    $('#'+abbr+'mapresults').hide(); 
    $('<a href="#showmap">Map</a>').fancybox({
        overlayShow: true,
        onClosed: function() {
            $('#'+abbr+'mapresults').show();
            map_latdec = $('#decValLat').attr('value');
            map_longdec = $('#decValLon').attr('value');
            map_latdeg = $('#degValLat').attr('value');
            map_longdeg = $('#degValLon').attr('value');

            $('#'+abbr+'decValLatsub').val(map_latdec);
            $('#'+abbr+'decValLonsub').val(map_longdec);
            $('#'+abbr+'degValLatsub').val(map_latdeg+'N');
            $('#'+abbr+'degValLonsub').val(map_longdeg+'W');
        }
    }).click();    
};

Why would you redefine abbr as it is an argument of your function? — Harmen, Oct 21 '10 at 21:24
It looks to me that the page this isn't working on is missing the javascript file that defines `fancybox`. Have you checked to make sure you're including the same javascript files on both pages? — andrewle, Oct 21 '10 at 21:35
well that was what I thought too. So what I did is, I opened up jquery.fancybox-1.3.1.js file and added some test code which would alert whenever this function is called. What it did is, whenever there is a page loaded, the fancybox javascript file is loaded, and an alert comes up. But I am still not convinced that the function fancybox is being available to this page, and I am not sure how to check if that is accessible to this file? — macha, Oct 21 '10 at 21:39
That's pretty odd. If the same code is working on one page but not the other, then the file is either missing (which it seems obviously not) or the function is getting squished by a later script load. Can you post the script tags you're using on the working and nonworking pages? — andrewle, Oct 22 '10 at 04:53

score 64 · Accepted Answer · answered Oct 21 '10 at 22:00

64

I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).

answered Oct 21 '10 at 22:00

Guillaume86

14,341
4
53
53

2

how do I check if I am reimporting?? I guess that is the problem – macha Oct 21 '10 at 22:08
Do we have a method to look for multiple instances, which might happen involuntarily?? As of now I am sure I only am loading both the plugins and jQquery source only once. That is in my default layout. But I have read elsewhere too, that this could be the problem. – macha Oct 22 '10 at 14:46
You are the man!! I was using another view to loaded as part of a div, which loaded my default layout again, which in turn loaded my jQuery all together!! Thanks a lot Sir!! – macha Oct 22 '10 at 15:01
1

no problem, a way to check is to append something to the jQuery object after the first import and check it's still there with firebug ($.test = "ok";) – Guillaume86 Oct 25 '10 at 15:47

score 8 · Answer 2 · answered Dec 19 '13 at 22:49

8

I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.

answered Dec 19 '13 at 22:49

Wyck

2,023
4
28
34

how about jquery 3.x it is not working now. Are there any alternatives for this plugin? – Alp Altunel Dec 12 '19 at 08:56

score 4 · Answer 3 · answered Oct 05 '15 at 17:14

Possible Solutions:

1) have you already loaded jQuery? If not, then load it before any $ commands start.

2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.

3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.

doublejosh · Answer 4 · 2017-08-22T00:02:43.463

4

You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.

edited Aug 22 '17 at 00:02

answered Feb 23 '12 at 21:12

doublejosh

5,548
4
39
45

Didn't resolve my issue -- my page clearly loads the fancybox js file but still throws the error "fancybox is not a function". – jimiayler Aug 09 '17 at 15:12
@jimiayler Did you load it after the plugins? – doublejosh Aug 22 '17 at 00:03
@doublejosh I did, no dice. Ended up running with prettyPhoto instead. – jimiayler Aug 23 '17 at 00:08
Sounds like you implemented its features, ran init or bound to images before it was loaded. Perhaps your image content is being loaded dynamicly. – doublejosh Oct 14 '17 at 17:05

score 2 · Answer 5 · answered Sep 28 '13 at 09:56

2

In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.

answered Sep 28 '13 at 09:56

Uli

539
3
11

Moses · Answer 6 · 2010-10-21T22:34:52.380

2

If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.

EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.

edited Oct 21 '10 at 22:34

answered Oct 21 '10 at 21:49

Moses

9,033
5
44
67

score 1 · Answer 7 · answered Jan 03 '13 at 19:23

If you are using a plugin which includes JQuery into your header tag, this trouble can arise. I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.

score 0 · Answer 8 · edited Mar 24 '14 at 18:34

0

I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.

edited Mar 24 '14 at 18:34

Paulo Moura

18,373
3
23
33

answered Mar 18 '14 at 10:11

Shanaka

1
1

Fancybox is not a function

8 Answers8

Possible Solutions:

Linked