First time posting here, so be kind. I've looked everywhere and can't find my exact issue. I've created a fancybox gallery with inline HTML. It works great on the first click-through, but when it loops back around to the first div, it starts displaying them out of order. Because of this, I'd like to simply disable looping. However, I've tried disabling it through the Javascript to no avail.
For the record, this is the pattern the gallery takes on when navigating through:
^ If anyone can tell me why this is happening, go for it! It would be greatly appreciated. But I'll be content if I can just get it to stop looping
I'll share some of my code...
The HTML Markup:
<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>
The failing Javascript? Can provide more if needed:
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,
Thank you in advance.
<3 Laura
Well, this one is easy to explain :
Fancybox will create a gallery out of ALL <a> tags with class="fancybox" AND data-fancybox-group="gallery" ... including those INSIDE your inline(s) content.
In other words, if have your thumbnails like :
<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>
... then the fancybox gallery will consist of 4 elements in that order, however, if you also include inside the content of #inline1 :
<a class="fancybox" href="#inline2" data-fancybox-group="gallery">Fog >></a>
... then you are adding a fifth element to your gallery (#inline2) and this is why #inline2 is always displayed after the #inline4
Of course, if you add inside #inline2
<a class="fancybox" href="#inline1" data-fancybox-group="gallery"><< Trees</a> |
<a class="fancybox" href="#inline3" data-fancybox-group="gallery">Sunshine >></a>
... then #inline1 becomes the 6th element of your gallery AND #inline3 the 7th, and so on and so forth.
At this point your gallery will be
How can you solve it?
If you want to include your own navigation inside your inline content(s), first consider how javascript indexes work, where the first element starts with index = 0 so :
If you know the index of each element of the gallery you want to move to, then you could use the fancybox method $.fancybox.jumpto() to navigate through the gallery.
So, if you want to go to fog (from within #inline1), instead of this :
<a class="fancybox" href="#inline2" data-fancybox-group="gallery">Fog >></a>
... do this :
<a href="javascript:$.fancybox.jumpto(1);">Fog >></a>
NOTICE that I am escaping the character > using its form > to avoid html validation errors (use < for the character < instead)