ファンシーボックスを使用して、手動で呼び出された複数の画像ギャラリーを表示しようとしています。1 つのギャラリーを動作させることはできますが、2 つ目のギャラリーは開きません。コードは次のとおりです。
ジャバスクリプト
$(document).ready(function() {
$('.fancybox').fancybox();
/* MANUAL OPEN */
$("#fancybox-manual-c").click(function(){
$.fancybox.open([
{
href : 'image1.jpg',
rel : 'set01',
title : 'My title'
}, {
href : 'image2.jpg',
rel : 'set01',
title : '2nd title'
}, {
href : 'image3.jpg',
rel : 'set02',
title : '3rd title'
}, {
href : 'image4.jpg',
rel : 'set02',
title : '4th title'
}
]);
});
/* END OF MANUAL OPEN */
});
HTML
<div>
<a id="fancybox-manual-c" rel="set01" href="javascript:;"><img src="thumbnail01.jpg"></a>
</div><!-- END OF PICTURE THUMBS -->
<div><hr /></div>
<div>
<a id="fancybox-manual-c" rel="set02" href="javascript:;"><img src="thumbnail02.jpg"></a>
</div><!-- END OF PICTURE THUMBS -->
最終的には、画像をアップロードするたびにファイルにコード行を追加する必要がないように、何らかの方法で画像を呼び出したいと考えていますが、これまでのところ、2 つのインスタンスを正しく動作させるのに苦労しています。
そのまま機能しているページ上の他のリンクでfancyboxを使用していることに注意してください。同じページで問題なくYouTubeビデオも呼び出しています。また、より一般的な質問のいくつかをここで答えなしで試しました。成功。
また、そのJSコードのセクションをコピーするのを間違えたと確信しています。したがって、最後の閉じ括弧に関するエラーはタイプミスです。