FancyBox 'Uncaught TypeError: Cannot call method 'hide' of undefined'

Question

I've been screwing around with fancybox. I work in the CakePHP Framework and I made an admin panel. This panel has a few options which I load via AJAX into an Div over the page itself.

Now when I put an image in this div and try to use Fancybox I get this error when I click on a image (to enlarge it):

Uncaught TypeError: Cannot call method 'hide' of undefined
N
I
b.fn.fancybox
f.event.dispatch
f.event.add.h.handle.i

Now this is my ajax loader (functions.js)

$(".cmsPage").click(function() {
    var url = $(this).attr("href");

    $.ajax({
        url: url,
        success: function(data){
            $("#admin_wrapper").fadeIn('slow');
            $("#admin_content").fadeIn('slow');
            $("#admin_close").fadeIn('slow');
            $("#admin_content").html(data);

        }
    });
    return false;
});

admin_content is where the images are displayed:

#admin_content{
    display:none;
    position:absolute;
    z-index:10;
    background-color:#fff;
    opacity:1;
    width:1000px;
    min-height:500px;
    top:1%;
    color:black;
    padding:10px;
    margin:10px;
    border:solid black 1px;
    border-radius:5px;          
}

But if I go to the page itself (without using ajax) it works perfectly fine.

Is there something that overrules fancybox? The error is not that clear to me. I tried everything in here But I am not using wordpress.

using fancybox v1.3.x? if so check http://stackoverflow.com/a/10464331/1055987 .... in your case you should replace the `.on()` selector by `#admin_content` — JFK, May 10 '12 at 19:18
Thank you for your reply. I added the following code to my Fancybox. And it didn't work. $("#admin_content").on("focusin", function(){//fancybox in here });. And it did not work. — Hawiak, May 11 '12 at 06:56
Sorry for the late reply. But yeah, I'd use JQuery 1.7.2 Also JQuery UI if thats important to know. — Hawiak, May 14 '12 at 07:44

score 17 · Answer 1 · answered Oct 24 '12 at 03:07

17

I ran into this exact same error because I had foolishly included the jquery.fancybox.js twice on the page. Just remove the second call, and the problem should be fixed.

answered Oct 24 '12 at 03:07

alexkb

3,216
2
30
30

If you want two fancyboxes? or if you want two fancybox jquery plugins? If it's the former, you can still have more than one, you just call the fancybox() function on another selector - you don't need the library twice. If you want two libraries (although I'm not sure why you'd want two), then you might be able to namespace one of them, but you'll need to look up that separately. – alexkb Nov 12 '12 at 02:45
Thanks mate, your answer saved me some time. Duo to an error it got included twice which caused indeed the error! – Maarten Kieft Aug 06 '13 at 12:36

score 1 · Answer 2 · answered Jan 23 '14 at 13:27

1

I had the same issue and problem was, that fancybox was inicialized more than once. Just had to make sure, to inicialize it once.

answered Jan 23 '14 at 13:27

dipo

33
4

score 0 · Answer 3 · answered Dec 10 '16 at 03:04

I had this issue happen to me as well. The issue was that I had saved a source code of a jsFiddle that I had been working on to test it on a server sandbox environment. When the fancyBox (1.3.4) inititalized from jsFiddle, it created a lot of hidden divs and such related to the manner in which the lightbox is built. Once I noticed this and removed all those extra <divs> from the source code, it worked fine.

FancyBox 'Uncaught TypeError: Cannot call method 'hide' of undefined'

3 Answers3