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.

Answer 1

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.

Answer 2

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