Fancybox trouble: undefined is not a function

问题

i'm with a little trouble here. Trying to install fancybox i'm getting this javascript error:

'undefined' is not a function (evaluating '$("a.fancybox").fancybox()')

here is my HTML

<a href="http://localhost/vm/wp-content/gallery/txt/l2.jpg" class="fancybox">
<img src="http://localhost/vm/wp-content/gallery/testando/thumbs/thumbs_l2.jpg">
</a>

and my javascript

<script type="text/javascript">
$(document).ready(function() {
    $("a.fancybox").fancybox();
});
</script>

Has anyone encountered this problem?

Thanks !

回答1:

I am assuming that you are using fancybox v1.3.x because that version cannot display dynamically added elements in Fancybox (FYI Fancybox v2.x can handle existing and dynamically added elements).

If you don't want to upgrade to Fancybox v2.x then you have two options:

Use the jQuery livequery plugin or
Rebuild you script and use jQuery delegate() to trigger fancybox with the new elements

Both options are explained here.

Please notice that using the jQuery delegate() solution won't work with Fancybox galleries, only with single elements.

If you don't want to use the livequery plugin and still want to use Fancybox galleries of dynamically added elements, alternatively you could upgrade to jQuery 1.7+ and use the new API jQuery on()

I have a demo page here that shows how to use jQuery on() to display Fancybox galleries with existing and dynamically added elements. Please feel free to look at the source code.

回答2:

I've run into a similar problem when a page has two copies of jQuery. So, make sure you only have ONE copy of jQuery on your page.

What happens is that Fancybox is extending itself from the first copy of jQuery; but because of a second copy, the document ready is being called from that copy only. And of course Fancybox is not applied to it.

来源：https://stackoverflow.com/questions/8655948/fancybox-trouble-undefined-is-not-a-function

标签

javascript

jquery

fancybox