I have question concerning Fancybox 3. I have web page with many (10-15) image galleries each with about 50 images. Each gallery has one picture link on main page. What fancybox use is better/more efficient?:
Using without thumbnails -> thumbnails grid is generated from big size images -> effect: when opening one gallery all big pictures are loaded.
<p>
<a href="big.jpg" data-fancybox="images">
<img src="small_thumbnail.jpg" />
</a>
</p>
<div style="display: none;">
<a href="big_1.jpg" data-fancybox="images"></a>
<a href="big_2.jpg" data-fancybox="images"></a>
</div>
Using with thumbnails -> thumbnails grid is generated from thumbnail small size images -> effect: when opening main page all thumbnails are loaded without any gallery openning.
<p>
<a href="big.jpg" data-fancybox="images">
<img src="small_thumbnail.jpg" />
</a>
</p>
<div style="display: none;">
<a href="big_1.jpg" data-fancybox="images"> <img src="small_1_thumbnail.jpg"> </a>
<a href="big_2.jpg" data-fancybox="images"> <img src="small_2_thumbnail.jpg"></a>
</div>
You have another option - use data-thumb
attribute to store custom thumbnail image. Example:
<a href="big-image.jpg" data-fancybox="images"
data-thumb="small-image.jpg"></a>
Se this demo - http://codepen.io/fancyapps/pen/yMxzvE?editors=1010 FYI, this can be any element, it is not necessary to be <a>
.
If you do not want to create elements for each gallery item, but you are comfortable to write a bit JS, then another option would be to store gallery items in array and to use instance.addContent()
method within onInit
callback to populate current gallery, see this demo - https://codepen.io/anon/pen/GbradR?editors=1010 or more general - https://codepen.io/anon/pen/Gbraep?editors=1010