javascript - TypeError: $(...).colorbox is not a function

I am using bellow js code

<script type="text/javascript"> 
    $(document).ready(function(){
        $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
        $(".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 pletely closed'); }
        });
    });
    </script>

Then this bellow error ing

TypeError: $(...).colorbox is not a function [Break On This Error]

$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});

when I click on video link it directly opening in page instead of lightbox effect

I am using bellow js code

<script type="text/javascript"> 
    $(document).ready(function(){
        $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
        $(".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 pletely closed'); }
        });
    });
    </script>

Then this bellow error ing

TypeError: $(...).colorbox is not a function [Break On This Error]

$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});

when I click on video link it directly opening in page instead of lightbox effect

Share Improve this question edited Sep 9, 2015 at 12:05 Hassaan 7,6826 gold badges33 silver badges53 bronze badges asked Oct 18, 2013 at 11:27 Ras4U 4922 gold badges12 silver badges30 bronze badges

2 Have you included the plugin? – Qantas 94 Heavy Commented Oct 18, 2013 at 11:29
3 jQuert conflict.. stackoverflow./questions/3188262/jquery-noconflict – Mr. Alien Commented Oct 18, 2013 at 11:30
2 yes included there is no conflict only 2 more js files are there statcounter./counter/counter.js and www.google-analytics./analytics.js – Ras4U Commented Oct 18, 2013 at 11:35
2 I am also got same error :( – user1990029 Commented Oct 18, 2013 at 11:38
1 then waht u did @ LearnPhp ???? – Ras4U Commented Oct 18, 2013 at 11:44

| Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

This is just about the most stripped down example I can give, bining your code with some sample code from the website (specifically the JS and CSS from this page: http://www.jacklmoore./colorbox/example2/). Note that /public is where I store external assets in my setup.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="/public/colorbox.css" />
    </head>
    <body>
    <a class="youtube cboxElement" href="http://www.youtube./embed/VOJyrQa_WR4?rel=0&amp;wmode=transparent">Flash / Video (Iframe/Direct Link To YouTube)</a>
    <script src="/public/jquery-1.10.2.js"></script>
    <script src="/public/jquery.colorbox.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
        $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
        $(".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 pletely closed'); }
        });
    });
    </script>
    </body>
    </html>

That code produces a link which, when clicked, opens a lightboxed video with your size specifications.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - TypeError: $(...).colorbox is not a function - Stack Overflow

1 Answer 1