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 は関数ではありません [このエラーで中断] 

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

ビデオリンクをクリックすると、ライトボックス効果の代わりにページで直接開きます

4

1 に答える 1

3

これは、あなたのコードを Web サイトのサンプル コード (具体的には、このページの 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 に答える