Fancybox: just some images displayed in page but h

Question

This is my script that calls FancyBox:

<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery(".fancybox").fancybox({
  helpers : { 
   title : { type : 'float' }
  },
      beforeShow: function(){
       this.title = '<div>'+jQuery(this.element).next('div').html()+'</div>';
      }
 });
});
</script>

And these are my 6 images in HTML

<div id="mydiv">
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb1" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb2" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb3" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb4" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb5" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
<a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"><img id="thumb6" src="THUMB_URL" /></a><div style="display: none;">DESCRIPTION</div>
</div>

What I'd like to do is: have only these 6 images displayed in the page but when the user clicks on the next icon (within fancybox), other images are loaded in the gallery (so, arrived at fifth image it won't restart but go on with other images). I can't do this with display:none removed when clicking next, because they would be a lot of images. And images with display:none are still loaded at load time. Can you provide me examples of how to do this in a clean way? :)

Answer 1

For your extra images, just place their links inside an extra hidden div like :

<div style="display: none;">
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 <a class="fancybox" data-fancybox-group="gallery" href="IMAGE_URL"></a><div>DESCRIPTION</div>
 ... etc
</div>

NOTICE that the links inside the hidden div HAVE NOT thumbnail images (<img />) so you are not actually adding any overhead to your page load .... and regarding the links, if you want more images in your gallery, you have to hard-code them here or anywhere like inside your script for instance.