TypeError: 'undefined' is not a function (evaluating '$(".fancybox").fancybox()')
Working on a new version of my site but can't get fancy box to load properly:
http://www.taintmovie.com/storecartloom2/
I checked for duplicate calls to jquery, but did not see any.
Answer
Digging a little bit more into the issue, is not the packed version of the fancybox.js file that is broken as previously suggested (I compared the file with the fancybox website and they matched.)
There are three things you have to fix in your website in order to get rid of the error and make fancybox to work properly:
1). Close your <head> tag (currently there is not </head> closing tag)
2). You said you checked for jQuery duplicates BUT you are loading this script:
<script type="text/javascript" id="cljs" src="https://taintmovie.cartloom.com/cart/cl?dr=1&ol=1"></script>
LINK HERE, which includes jQuery v1.4.2 so it's conflicting with v1.7.2 already loaded.
This is actually the reason of this error:
Error: TypeError: $(".fancybox").fancybox is not a function
Source File: http://www.taintmovie.com/storecartloom2/
Line: 40
... you may want to edit that file and strip out the jQuery part.
3). You are binding fancybox to the selector .fancybox like :
$(".fancybox").fancybox();
...however your html looks like:
<a class="fancybox.iframe" href="http://www.youtube.com/embed/bHEEdUQCNsM?autoplay=1"><img src="images/pantheonblack300.png"></a>
you actually need to set the class fancybox besides the fancybox.iframe class like:
<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/bHEEdUQCNsM?autoplay=1"><img src="images/pantheonblack300.png"></a>
... otherwise it won't work.