Strange jQuery issues together with FancyBox and Youtube!

Question

Me and a friend did some trial and error yesterday about adding youtube support to FancyBox popup. The code is;

jQuery(document).ready(function(){
    jQuery("a.youtube").click(function() {
    jQuery.fancybox({
            'padding'           : 0,
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'title'             : this.title,
            'width'             : 520,
            'height'            : 317,
            'href'              : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'              : 'swf',
            'swf'               : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
            }
        });

    return false;
    });
});

At first, we encountered an issue with $ where we switched this out for jQuery (even though there are no other scripts present than jQuery).

Strangely enough, when we link to this .js file (we put it in its own js file), the content is somehow not being picked up by jQuery. Or this would be my first thought as it is working just fine if we write it within <script> tags in the core html-code.

I would like to know if anyone knows any logical explanation to this, we know the file is placed and linked correctly, as we got this error when first encountering the $/jQuery-issue (which disappeared upon switching to jQuery);

Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function

Why does it work in the core html-code and not linked?

Answer 1

are you loading jquery after this .js file ?

Answer 2

No, this custom js file is positioned after both jquery and fancybox so it should be loaded after the rest.