2

スライドショーを行うためにjQuery Colorbox [ http://www.jacklmoore.com/colorbox ] を使用しています。さまざまなコンテンツ（画像、ビデオ、iframe、インライン要素など）で機能させる方法がわかりません。

<p><a class="image" href="ohoopee1.jpg" rel="slideshow">An image</a></p> 
<p><a class="video" href=""http://www.youtube.com/embed/617ANIA5Rqs?rel=0&amp;wmode=transparent" rel="slideshow">a Youtube video - should be iframed</a></p> 
<p><a class="page" href="http://stackoverflow.com" rel="slideshow">a page, should be iframed.</a></p> 
<p><a class="image" href="ohoopee2.jpg" rel="slideshow">Another image</a></p>

この例では、画像と iframe があります。私が使用する場合

<script>
$("a[rel="slideshow"]").colorbox({slideshow:true});
</script>

youtube と iframe が表示されない (コンテンツの読み込みに失敗する)

私は別のアプローチをテストしましたが、それは機能しますが、すべての画像が最初に表示され、次にビデオが表示されます(順不同)。このような：

<script>
  var $slideshow = $('.image').colorbox({...}); 
  $slideshow.push ( $('video').colorbox({iframe:true, ...})); 
  $slideshow.eq(0).click();
</script>

順番に表示する必要があることを覚えておいてください。助けていただければ幸いです。

4

3 に答える 3

2

要素に rel 属性を使用することもできますが (現在使用しているように)、代わりに colorbox の rel プロパティを使用することをお勧めします。次のようなことができます。

$('.image').colorbox({rel:'slideshow', slideshow:true});
$('.iframe, .video').colorbox({iframe:true, width:500, height:500 rel:'slideshow', slideshow:true});

画像と iframe の設定を個別に指定する必要がありますが、プラグインがそれらをグループ化する必要があることを認識できるように、rel 属性に同じ値を指定する必要があります。

于 2013-02-06T13:49:22.663 に答える
0

このため、おそらく機能していません。

<script>
$("a[rel="slideshow"]").colorbox({slideshow:true});
</script>

注意を払うと、引用符が正しくないことに気付くはずです。これにより、解析エラーが発生するはずです。

次のように変更します。

<script>
$('a[rel="slideshow"]').colorbox({slideshow:true});
</script>

セレクターの最初と最後にある一重引用符に注意してください。

于 2013-02-05T21:39:36.167 に答える
0

ドキュメントを確認する.colorbox({slideshow:true})と、自動スライドショーで画像ギャラリーを設定します

于 2013-08-13T17:58:08.877 に答える