Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using Fancybox 3 image galleries with or without thumbnails?

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?:

  1. 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>
    
  2. 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>
    
like image 502
cniedzi Avatar asked Mar 10 '23 12:03

cniedzi


1 Answers

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

like image 187
Janis Avatar answered May 13 '23 11:05

Janis