ここに投稿するのは初めてなので、親切にしてください。私はどこを見ても、正確な問題を見つけることができません。インライン HTML でファンシーボックス ギャラリーを作成しました。最初のクリックスルーではうまく機能しますが、最初の div にループバックすると、それらが順不同で表示され始めます。このため、単純にループを無効にしたいと思います。ただし、Javascriptを使用して無効にしようとしましたが、役に立ちませんでした。
記録のために、これはギャラリーがナビゲートするときに取るパターンです:
- ディビジョン 1
- ディビジョン 2
- ディビジョン 3
- ディビジョン 4
- Div 1 へのループ
- ディビジョン 3
- ディビジョン 2
- ディビジョン 4
- ディビジョン 3
- ディビジョン 1
^ 誰かがなぜこれが起こっているのか教えてくれるなら、それを試してみてください! それは大歓迎です。しかし、ループを止めることができれば満足です
私のコードの一部を共有します...
HTML マークアップ:
<div id="container">
<div><p>
<a class="fancybox" href="#inline1" data-fancybox-group="gallery"><img src="images/zacthumb.png" alt="" /></a>
<a class="fancybox" href="#inline2" data-fancybox-group="gallery"><img src="images/zacthumb.png" alt="" /></a>
<a class="fancybox" href="#inline3" data-fancybox-group="gallery"><img src="images/zacthumb.png" alt="" /></a>
<a class="fancybox" href="#inline4" data-fancybox-group="gallery"><img src="images/zacthumb.png" alt="" /></a>
</p></div>
</div></div>
<div id="inline1" style="width:820px;display: none;">
<p id="zac"><font size="4">
<b>ZAC NORRIS</b></font><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien.
Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu.<br /><br />Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.</p>
</p><br /><div id="boxnav"><center> <a class="fancybox" href="#inline2" data-fancybox-group="gallery"><img src="next1.png" onclick="$("ul li a").click(function() { $("#us").toggle("fast"); });"/></a></center></div>
</div>
<div id="inline2" style="width:820px;display: none;">
<p id="zac"><font size="4"><b>PERSON TWO</b></font><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu.<br /><br />Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.</p>
</p><br /><div id="boxnav"><center><a class="fancybox" href="#inline1" data-fancybox-group="gallery"><img src="prev1.png" onclick="$("ul li a").click(function() { $("#us").toggle("fast"); });"/></a> <a class="fancybox" href="#inline3" data-fancybox-group="gallery"><img src="next1.png" onclick="$("ul li a").click(function() { $("#us").toggle("fast"); });"/></a></center></div>
</div>
<div id="inline3" style="width:820px;display: none;">
<p id="zac"><font size="4"><b>PERSON THREE</b></font><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu.<br /><br />Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.</p>
</p><br /><div id="boxnav"><center><a class="fancybox" href="#inline2" data-fancybox-group="gallery"><img src="prev1.png" /></a> <a class="fancybox" href="#inline4" data-fancybox-group="gallery"><img src="next1.png" /></a></center></div>
</div>
<div id="inline4" style="width:820px;display: none;">
<p id="zac"><font size="4"><b>PERSON FOUR</b></font><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu.<br /><br />Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.</p>
</p><br /><div id="boxnav"><center><a class="fancybox" href="#inline3" data-fancybox-group="gallery"><img src="prev1.png" /></a> </center></div>
</div>
失敗したJavascript？必要に応じてさらに提供できます。
defaults: {
padding : 5,
margin : 20,
width : 800,
height : 600,
minWidth : 100,
minHeight : 100,
maxWidth : 9999,
maxHeight : 9999,
autoSize : true,
autoHeight : false,
autoWidth : false,
autoResize : true,
autoCenter : !isTouch,
fitToView : true,
aspectRatio : false,
topRatio : 0.5,
leftRatio : 0.5,
scrolling : 'auto', // 'auto', 'yes' or 'no'
wrapCSS : '',
arrows : true,
closeBtn : true,
closeClick : false,
nextClick : false,
mouseWheel : false,
autoPlay : false,
playSpeed : 3000,
preload : 3,
modal : false,
cyclic : false,
前もって感謝します。
<3 ローラ