4

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>
    

1 Answer 1

8

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.