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 Ras4URas4U 4922 gold badges12 silver badges30 bronze badges 6- 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
1 Answer
Reset to default 3This 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&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.