0

カラーボックス プラグインを使用しています。ギャラリーにいくつかのビデオを含めたいのですが、次のコードを参照してください: http://jsfiddle.net/29Bb4/基本的に、次のアイテムがアイデアをロードするときにビデオがロードされませんか?

私がこのように使うとき：

$(".group1").colorbox({rel:'group1', iframe:true, width:"80%", height:"80%"});ギャラリー効果を壊します：

  • または、画像とビデオの両方を使用できる優れたポップアップ プラグインはありますか?
4

2 に答える 2

13

2 つのコンテンツ タイプ (画像と iframe) の設定が異なります。それらを同じグループとして表示するのは簡単ですが、設定を個別に定義する必要があります。

$(".group1").colorbox({rel:'group1'});
$(".iframe").colorbox({rel:'group1', iframe:true, width:"80%", height:"80%"});
于 2012-06-20T02:51:52.653 に答える
-2

あなたの質問では代替ソリューション/プラグインを許可しているので、 fancybox を使用することをお勧めします。これはあなたの例のhtmlのデモです。

http://jsfiddle.net/lucuma/Skpyw/3/

http://fancyapps.com/fancybox/

<p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
        <p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
        <p><a class="group1" rel="group1" href="http://www.jacklmoore.com/colorbox/content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

        <p><a class='group1 fancybox.iframe' rel="group1" href="http://www.youtube.com/embed/KHy7DGLTt8g?rel=0" title="video">Video (Iframe/Direct Link To YouTube)</a></p>


$(".group1").fancybox({
       maxWidth    : 800,
        maxHeight    : 600,
        fitToView    : false,
        width        : '70%',
        height        : '70%',
        autoSize    : false,
        closeClick    : false,
        openEffect    : 'none',
        closeEffect    : 'none' 
});

$('#btnOpen').click(function(e) {
   e.preventDefault();
    $('.fancybox:eq(0)').click();
});
于 2012-06-15T19:05:24.487 に答える