この同じ問題に関していくつかの問題を見てきました。それらで提案されているすべてを試しましたが、これまでのところ何も機能していません。
css/js ファイルを次の順序でロードしています: Colorbox.css->jQuery.js->Colorbox.js (それらの間に他の css および js ファイルがロードされています)。
スクリプトを介してカラーボックスを起動しています:
$().ready(function() {
$('.dgallery').click(function(e) {
e.preventDefault();
$('a[class=dgallery]').colorbox({
rel:'dgallery',
slideshow:true,
preloading:true,
slideshowSpeed:4000
}).click();
});
});
そして HTML (.dgallery はスタイルシートに display:none を持っています):
<a class="dgallery" href="/assets/images/VideoSlides/slide1.png"></a>
<a class="dgallery" href="/assets/images/VideoSlides/slide2.png"></a>
<a class="dgallery" href="/assets/images/VideoSlides/slide3.png"></a>
問題はブラウザによって異なるようです。
Chrome にはライトボックスと画像が表示されますが、境界線とボタンがありません。ときどき、ライトボックスが開いていて、「画像の読み込みに失敗しました」と表示されるのを見たことがありますが、スライドショーを続行すると機能します (境界線とボタンはまだありません)。
Firefox はライトボックスを開きますが、見た目は問題ありません。しかし、「読み込み中」のグラフィックとともにそこに座っているだけで、画像を読み込むことはありません。
IE は Chrome と同じことを行います。ライトボックスを開く前にブラウザが白く点滅するのを見たことがあります。
他に何が欠けているのか本当にわかりません。