136

this is driving me nuts. Iv'e created a simple test page..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../admin/UI/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="admin/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#foo").fancybox({
        'autoDimensions':   false,
        'width'         :   '750',
        'height'        :   '90%',
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true,
        'hideOnOverlayClick' : false
    });
});
</script>
<title>Untitled Document</title>
</head>

<body>
<a href="foo.php" id="foo">test</a>
</body>
</html>

when clicking the link i get `d.onCleanup is not a function !!! does anyone know where this error is coming from!!

or on the unpacked version:

currentOpts.onCleanup is not a function on fancybox/jquery.fancybox-1.3.4.js Line 324
Phil Jackson
  • 9,936
  • 20
  • 92
  • 127

1 Answers1

309

You forgot to add the CSS of fancybox. Once you include it everything should work fine.

Jordi
  • 3,114
  • 1
  • 13
  • 2
  • 3
    Thanks. On chrome this looked like: Uncaught TypeError: Object # has no method 'formatMatch' Uncaught TypeError: Object # has no method 'onCleanup' – waldo Dec 29 '10 at 22:18
  • 19
    Out of curiosity, why is this? It doesn't seem to work if the css files are all combined into one either... – SeanJA Apr 30 '11 at 04:59
  • 3
    I can confirm that Drupal's CSS combining/bandwidth optimizing Performance feature will cause this problem to occur. Methinks Fancybox needs a better way of testing for the existence of assets. – jschrab Jun 03 '11 at 19:37
  • This is such a subtle and unusual bug! Thanks for letting us all know what's going on! – Rich Bradshaw Jan 21 '12 at 10:20
  • 2
    @jordi, my god, this answer is making you rich! thanks for the help – Kristian Mar 11 '12 at 10:37
  • 1
    I had already similar bugs due to lack of CSS with JS scripts, but didn't expect it to be the problem here... Thanks!! – FelipeAls Feb 06 '13 at 11:35
  • 1
    Anyone know what specific elements is causing this to crash? I'm writing a JS spec that fails because obviously one would "usually" never include CSS in a JS test.. I'm curious if anyone knows what I could stub to make this function defined. – Trip Feb 10 '14 at 13:30
  • Wow, it's so weird that this was the problem. Why would lack of CSS cause JS to fail? – Ryan Mar 27 '14 at 20:15
  • I added the fancybox css definitions to the end of my main site stylesheet (to eliminate one more browser connection) and it fixed the issue for me. So it looks like at least in some cases the css file can be appended to you your main site stylesheet. – Mark1270287 Jul 02 '14 at 21:29