CODEWITHSUNDEEP
jqueryhtmlcsscolorbox
Francesca
Francesca

Reputation: 28138

Colorbox not firing correctly "Uncaught TypeError: Object [object Object] has no method 'colorbox'"

I've put all the correct files in, and the js and css is correctly linked, but my colorbox doesn't seem to work. The error in the console is:

Uncaught TypeError: Object [object Object] has no method 'colorbox'

Linking in the head text (which is correct):

<!--ColorBox -->
<link rel="stylesheet" href="css/colorbox.css" />
    <script src="js/jquery.colorbox.js"></script>
    <script>
      $(document).ready(function(){
        //Examples of how to assign the ColorBox event to elements
        $(".group1").colorbox({rel:'group1'});
        $(".group2").colorbox({rel:'group2', transition:"fade"});
        $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
        $(".group4").colorbox({rel:'group4', slideshow:true});
        $(".ajax").colorbox();
        $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
        $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
        $(".inline").colorbox({inline:true, width:"50%"});
        $(".callbacks").colorbox({
          onOpen:function(){ alert('onOpen: colorbox is about to open'); },
          onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
          onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
          onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
          onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
        });

        //Example of preserving a JavaScript event for inline calls.
        $("#click").click(function(){ 
          $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
          return false;
        });
      });
    </script>
<!-- End ColorBox -->

Can anyone help? There is a live example here

The colorbox should launch when the 'sign me up' button is clicked.

Upvotes: 1

Views: 8183

Answers (2)

CSSian
CSSian

Reputation: 1661

The script is faulty. You have at two additional "})" sets. Remove them like this:

<script>
  $(document).ready(function(){
    $(".callbacks").colorbox({
      inline:true,
      onOpen:function(){ alert('onOpen: colorbox is about to open'); },
      onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
      onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
      onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
      onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    });

    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){ 
      $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
      return false;
    });
  });
</script>

Get yourself an editor that does code-folding so you can visually see these mistakes.

Also, don't load JS in the head; it's a performance hit. http://developer.yahoo.com/performance/rules.html#js_bottom

Upvotes: 2

Ruan Mendes
Ruan Mendes

Reputation: 92274

Fix the syntax error in http://www.rubytuesdaycreative.co.uk/testsite/src/jquery.countdown2.js

Uncaught SyntaxError: Unexpected token }

Everything else looks OK

Upvotes: 0

Related Questions