1

我正在使用波纹管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>

然后这个波纹管错误来了

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

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

当我点击视频链接时，它直接在页面中打开而不是灯箱效果

4

1 回答 1

3

这几乎是我能给出的最精简的示例，将您的代码与网站上的一些示例代码相结合（特别是此页面中的 JS 和 CSS：http ://www.jacklmoore.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&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 completely closed'); }
        });
    });
    </script>
    </body>
    </html>

该代码会生成一个链接，单击该链接会打开一个带有您的尺寸规格的灯箱视频。

于 2013-12-05T20:50:55.343 回答