第一次在这里发帖,请善待。我到处找,找不到我的确切问题。我创建了一个带有内联 HTML 的 fancybox 库。它在第一次点击时效果很好,但是当它循环回到第一个 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 劳拉