Have Geek Brain

JQuery and Colorbox "Not a function"

I have been working on integrating Colorbox (lightbox alternative) into the site.

So my head file:

<head>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<link type="text/css" media="screen" rel="stylesheet" href="../colorbox/colorbox.css" />
<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
    function saveToBook() { 
        $.fn.colorbox({inline:false, href:'../index.html'}); 
    };
</script>
</head>

My link looks like this:

<a href="#save-to-book" onclick="javascript:parent.saveToBook();return false;" class="recipe-links">Save to Cookbook</a>

The only output I get (from FireBug):

$.fn.colorbox is not a function
+2


a source to share


3 answers


Hey sorry for wasting a lot of time on people - I was running this on my local machine.

I just decided to upload it to the beta server and it all works great, clearly didn't like my pathnames :)



Thanks @NickCraver for taking the shot and cheers @PetersenDidlt

0


a source


My best guess would be that this is ../colorbox/jquery.colorbox.js

not the right way, are you sure it is not?

<script type="text/javascript" src="js/colorbox/jquery.colorbox.js"></script>

Also, your script should be something like this:



$(function() {
  $("a[href='#save-to-book']").click(function() {
    $(this).parent().colorbox({inline:false, href:'../index.html'});
    return false;
  });
});

And just remove the current function and onclick

from the anchor itself.

+7


a source


Hey see below this is your code where you close script 2

<script language="javascript" type="text/javascript" src="js/jquery.js"></script></script>

0


a source






More articles:


All Articles