2

第一次在这里发帖,请善待。我到处找,找不到我的确切问题。我创建了一个带有内联 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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 劳拉

4

2 回答 2

0

你有多个这样写的 onclick 属性

onclick="$("ul li a").click(function() { $("#us").toggle("fast"); });"

在您的代码中,这是错误的 - 由于您对引号的处理不正确,此属性仅包含 $ 符号。先解决这个问题,看看问题是否仍然存在。如果是这样,请至少提供一个在线示例。

于 2013-03-17T04:08:21.657 回答
0

好吧,这个很容易解释:

Fancybox 将使用AND的所有<a>标签创建一个图库,包括那些在您的内联内容中的标签。class="fancybox"data-fancybox-group="gallery"

换句话说,如果您的缩略图像:

<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

当然,如果你在里面添加#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 个元素和 ,依此类推。#inline37th

此时您的画廊将是

  • #inline1
  • #inline2
  • #inline3
  • #inline4
  • #inline2
  • #inline1
  • #inline3 等

你怎么能解决它?

如果您想在内联内容中包含自己的导航,请首先考虑 javascript 索引的工作原理,第一个元素以index = 0 so 开头:

  • 树 = 0
  • 雾 = 1
  • 阳光 = 2
  • 巴黎 = 3

如果您知道要移动到的图库中每个元素的索引,则可以使用 fancybox 方法$.fancybox.jumpto()在图库中导航。

所以,如果你想去(从内部#inline1),而不是这个:

<a class="fancybox" href="#inline2" data-fancybox-group="gallery">Fog >></a>

... 做这个 :

<a href="javascript:$.fancybox.jumpto(1);">Fog &gt;&gt;</a>

请注意,我正在>使用其形式转义字符&gt;以避免 html 验证错误(改为使用&lt;字符<

于 2013-03-18T07:40:01.967 回答