How to Organize Slide Loading in Fancybox 5 for an Album with Multiple Pages?

[Everett-Young]

Hi everyone,

I'm working on a project where I use Fancybox to display photos from an album. Each page of the album can contain between 1 and 10 photos, and the total number of pages can vary (N pages).

Here's what I'm trying to achieve:

1. Initial Setup: When the album page is opened, I use Fancybox.bind to initialize Fancybox for the photos on that specific page.

2. Slide Loading: While viewing the photos in Fancybox, I need to dynamically load photos from other pages. Specifically:

• Photos from the previous page should be added to the start of the Fancybox slider.
• Photos from the next page should be added to the end of the slider.

Given this setup, what would be the best way to organize the slide loading in Fancybox5? How can I efficiently manage this dynamic loading while ensuring a smooth user experience? Any advice or best practices would be greatly appreciated.

What I've Tried So Far:

I attempted to implement the dynamic slide loading using the beforeChange event in Fancybox, with the following approach:

• On the Left Edge: If the user tries to navigate back from the first photo on the current page, I used prependSlide to add the slides from the previous page to the start of the slider. After adding the new slides, I called slidePrev to navigate to the last photo of the newly added slides.

• On the Right Edge: Similarly, if the user navigates forward from the last photo on the current page, I used appendSlide to add the slides from the next page to the end of the slider. After adding the new slides, I called slideNext to proceed to the first photo of the newly added slides.

In both cases, I used preventDefault in the beforeChange event to cancel the native transition behavior.

However, I’ve encountered an issue where there’s a noticeable visual flicker or jump with the photo being transitioned from. I suspect this occurs because all the slides are being rebuilt or re-rendered after the new slides are added, which disrupts the smoothness of the transition.

Additional Question:

Is there a setting in Fancybox that allows the [navigation arrows, infobar, thumbs] to be displayed even when there's only one photo in the slider?

[fancyapps]

Hi, Sorry, but I couldn't understand why you want to add slides, like why you can't just include all the photos in the gallery.
To ensure smooth transitions, you have to have some slides before and also after the current slide, then you can have infinite gallery (see #71 (comment)).

Is there a setting in Fancybox that allows the [navigation arrows, infobar, thumbs] to be displayed even when there's only one photo in the slider?

Sorry, there is a minCount option for the thumbnails https://jsfiddle.net/qu29kbcf/ but not for others.

[Everett-Young]

Hi, thanks for your response! My project is organized in such a way that each album page only contains photos for that specific page, and these photos have the necessary Fancybox attributes. When viewing photos in Fancybox, I need to initially display only the photos from the current page. As users scroll to the edges, I want to add photos from the previous page to the left (at the beginning of the slider) and photos from the next page to the right (at the end of the slider). Adding photos to the end works perfectly without issues, but adding them to the beginning always causes flickering of the currently displayed photo in Fancybox. In some cases, when the current photo is large, it also triggers a content resizing animation for the current slide.

I can't load all the photos for the lightbox at once because the API only provides a list of photo URLs one page at a time. There can be many such pages, and loading everything at the start isn't feasible since the user might only need the photos from the current page. So, I need to add photos to Fancybox dynamically as needed.