Ability to control how images are preloaded

[GlenBoonzaier]

Is your feature request related to a problem? Please describe.

Currently, when you open the gallery by clicking an image, the gallery downloads all the images in the gallery. This is not desirable in some cases as there are costs involved from the user who is downloading the images, and from the server who is serving these images.

Our images are hosted on a CDN that charges us for data egress. If we can limit the number of images being downloaded that means we can save on the data egress costs.

Describe the solution you'd like

What I would like to see is a few options included: int PreloadNextImagesCount: n When the gallery opens, it will only download the next n images

int PreloadPreviousImagesCount: n When the gallery opens, it will only download the previous n images

New html attribute: data-fancybox-thumb="thumb-url" The purpose of this attribute is to allow for a set of thumbnails to be loaded regardless of the preload settings.

Describe alternatives you've considered

Well, the alternative that we are using at the moment is to simply allow all the images to be downloaded.

Additional context

No response

[fancyapps]

Hi,

Why do you think that "the gallery downloads all the images in the gallery"? That is not true. Fancybox is built around Carousel component and uses "virtual slides". Carousel has option preload that indicates how many next/prev slides to load. The default value is 1 that means, when Fancybox gallery is opened, only 3 slides are created (previous, current and next) and therefore only 3 images are loaded by default. If you wish, you can change/disable preloading like this:

Fancybox.bind('[data-fancybox="gallery"]', {
  Carousel : {
    preload: 0
  }
});

Currently, it is not possible to specify a different number of next and previous slides to load, because you never know which direction the user will swipe, and generally one next and one previous is enough.

And sorry, I did not understand the part about data-fancybox-thumb and thumbs and how is that related to number of images in gallery. If you're worried about too many loaded thumbnails, the story is the same - Thumbnails plugin uses Carousel component and this is how you can control how many pages to preload:

Fancybox.bind('[data-fancybox="gallery"]', {
  Thumbs : {
    Carousel : {
      preload: 0
    }
  }
});