5

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.

4
  • using fancybox v1.3.x? if so check stackoverflow.com/a/10464331/1055987 .... in your case you should replace the .on() selector by #admin_content
    – JFK
    May 10, 2012 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, 2012 at 6:56
  • using the latest version of jQuery? or at least v1.7?
    – JFK
    May 11, 2012 at 15:54
  • 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, 2012 at 7:44

3 Answers 3

18

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.

2
  • 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, 2012 at 2:45
  • Thanks mate, your answer saved me some time. Duo to an error it got included twice which caused indeed the error! Aug 6, 2013 at 12:36
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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.