第一次在这里张贴，所以要善良。我到处寻找，找不到我的确切问题。我创建了一个带有内联HTML的fancybox图库。它在第一次点击时效果很好，但是当它循环回到第一个div时，它会开始无序地显示它们。因此，我想简单地禁用循环。但是，我尝试通过Javascript禁用它无济于事。
对于记录，这是图库在导航时所采用的模式：
^如果有人能告诉我为什么会这样，那就去吧！这将不胜感激。但如果我能让它停止循环，我会满意
我会分享一些代码......
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,
提前谢谢。
＆lt; 3劳拉
答案 0 :(得分：0)
您有多个像这样编写的onclick属性
onclick="$("ul li a").click(function() { $("#us").toggle("fast"); });"
在您的代码中，这是错误的 - 由于您对报价的处理不正确，此属性仅包含$符号。首先修复，然后查看问题是否仍然存在。如果是这样，请至少提供一个在线示例。
答案 1 :(得分：0)
嗯，这个很容易解释：
Fancybox将使用<a>和class="fancybox"来创建包含所有data-fancybox-group="gallery"标记的图库...包括 INSIDE 您的内联内容。< / p>
换句话说，如果您的缩略图如下：
<a class="fancybox" href="#inline1" data-fancybox-group="gallery"><img src="1_s.jpg" alt="" /></a>
<a class="fancybox" href="#inline2" data-fancybox-group="gallery"><img src="2_s.jpg" alt="" /></a>
<a class="fancybox" href="#inline3" data-fancybox-group="gallery"><img src="3_s.jpg" alt="" /></a>
<a class="fancybox" href="#inline4" data-fancybox-group="gallery"><img src="4_s.jpg" alt="" /></a>
...然后fancybox图库将按顺序包含4个元素，但是，如果您还包含#inline1的内容：
<a class="fancybox" href="#inline2" data-fancybox-group="gallery">Fog >></a>
...然后您将第五个元素添加到您的图库（#inline2），这就是为什么#inline2始终显示#inline4 < / p>
当然，如果你在#inline2内添加
<a class="fancybox" href="#inline1" data-fancybox-group="gallery"><< Trees</a> |
<a class="fancybox" href="#inline3" data-fancybox-group="gallery">Sunshine >></a>
...然后#inline1成为图库的第6个元素，#inline3成为7th，依此类推。
此时您的画廊将
你怎么解决？
如果要在内联内容中包含自己的导航，请首先考虑javascript索引的工作原理， first 元素以index = 0开头的位置，以便：
如果您知道要移动到的图库的每个元素的索引，那么您可以使用fancybox方法$.fancybox.jumpto()来浏览图库。
所以，如果你想去雾（来自#inline1内），而不是：
<a class="fancybox" href="#inline2" data-fancybox-group="gallery">Fog >></a>
......这样做：
<a href="javascript:$.fancybox.jumpto(1);">Fog >></a>
注意我使用其格式>转义字符>以避免html验证错误（使用<作为字符<代替）