複数のプレビュー画像 (リンク) を含む 1 つのギャラリーを開始しています。最初のものはギャラリーを開始し、次のものは同じギャラリー内の特定の写真に移動しますが、必要に応じてギャラリー全体をクリックすることができます. これは、1 つの大きな画像ギャラリーのさまざまなポイントに移動するブックマークのセットアップと考えてください。
冗長であまり効率的ではありませんが、これがどのように機能するかを再現しました。全体がループするように偽装しているだけです。アドバイスをいただければ幸いです。
リンクは次のとおりです。
<a class="open_fancybox" href=""><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="open_fancybox2" href=""><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
これは冗長なJavascriptです（2番目のリンクの画像を異なる順序で表示しています）：
$(".open_fancybox").click(function() {
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title : '3rd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',
title : '3rd title'
}
], {
padding : 0
});
return false;
});
$(".open_fancybox2").click(function() {
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/4_b.jpg',
title : '2nd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '3rd title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '3rd title'
}
], {
padding : 0
});
return false;
});
ここで見ることができます：