javascript TypeError: $(...).colorbox 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19448586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: $(...).colorbox is not a function
提问by Ras4U
I am using bellow js code
我正在使用下面的 js 代码
<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 completely closed'); }
});
});
</script>
Then this bellow error coming
然后这个波纹管错误来了
TypeError: $(...).colorbox is not a function [Break On This Error]
TypeError: $(...).colorbox 不是函数 [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
当我点击视频链接时，它直接在页面中打开而不是灯箱效果
回答by devonnigelreed
This is just about the most stripped down example I can give, combining your code with some sample code from the website (specifically the JS and CSS from this page: http://www.Hymanlmoore.com/colorbox/example2/). Note that /public is where I store external assets in my setup.
这只是我能给出的最精简的示例，将您的代码与网站上的一些示例代码（特别是此页面中的 JS 和 CSS：http: //www.Hymanlmoore.com/colorbox/example2/）相结合。请注意， /public 是我在设置中存储外部资产的地方。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/public/colorbox.css" />
</head>
<body>
<a class="youtube cboxElement" href="http://www.youtube.com/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 completely closed'); }
});
});
</script>
</body>
</html>
That code produces a link which, when clicked, opens a lightboxed video with your size specifications.
该代码会生成一个链接，单击该链接会打开一个带有您的尺寸规格的灯箱视频。
