How can I add an image to the end of the lightbox?

[Container-Zero]

How can I add an image to the end of the lightbox? I have two usage scenarios where I may need to implement the above requirements:

Scenario 1:

I have 50 images in my web page originally, I click on any of the images, the lightbox starts successfully and 50 images are loaded in the lightbox, which is fine. Keep the lightbox open, at this point, suppose my website loads another 50 images through a dynamic technology like ajax, this time the website exists with 50 images at the beginning, plus 50 additional images later, for a total of 100 images. I need to keep the lightbox not to close the premise, so that the lightbox tail automatically append on the web page through ajax loaded in the 50 images.

Scenario 2:

Similar to the above scenario: I had 50 images in my web page, I clicked on any of the images, the lightbox started successfully, and 50 images will be loaded inside the lightbox, which is fine. Keeping the lightbox open, at this point, I get some HTML for the images「Similar to these」, which I then need to parse and add to the end of the lightbox for display.

Tried solutions:

I checked the documentation, but I didn't find anything like "update", "refresh", "append", etc., only something like " show", "setContent" and so on, these functions do not seem to achieve this requirement, I do not know what I should do.

[Container-Zero]

Hello, I noticed the Fancybox.getInstance().carousel.appendSlide() method mentioned in version 5.0.20 of CHANGELOG. Thank you very much for providing this method. I tried to manually write some code to analyze the dom, and using this method can effectively add images to the tail of existing lightboxes.

However, it seems difficult to ensure the correctness of manually analyzing the dom, such as after using Fancybox.getInstance().carousel.appendSlide()

1. I found that the added image will not be inserted into Fancybox. getInstance().userSlides.
2. If the thumbnail is already displayed, execute Fancybox. getInstance().carousel.appendSlide(), and the added items will not be added to the thumbnail.

I'm not sure if it will cause any other abnormal issues. For example, I have the following HTML code:

<a href="https://example.com/test.jpeg" data-srcset="" data-fancybox="gallery" class="preview-image">
<img class="fallback-image" src="https://example.com/thum-test.jpeg" alt="Fallback image">
</a>

Is it possible to provide a method for me to pass in the above HTML, automatically analyze the above dom, and correctly add it to the tail of the lightbox without causing unexpected bugs?

[fancyapps]

Fancybox is build around Carousel component and you can append/prepend slides using Carousel methods, like this:

Fancybox.getInstance().carousel.appendSlide({src : "https://lipsum.app/id/11/300x225/"});

The only thing currently missing is syncing with thumbnails.

There are two types of thumbnails - modern and classic. Modern thumbnails are not build around the Carousel and there are no methods to manage items.

But classic thumbnails are build around the Carousel, you can add new item like this:

Fancybox.getInstance().plugins.Thumbs.ref.carousel.appendSlide('<img src="https://lipsum.app/id/11/300x225/" />')

[JorisPersua]

Hello, I'm also very interested in a solution to scenario 2 of OP's question. I have a setup where in additional images (with additional information like captions) gets loaded in via AJAX. Is there a way for the appendSlide to access these new images along with the caption data and add it to the Lightbox without closing it?

[fancyapps]

@JorisPersua Sorry, but I do not understand your comment, you just use appendSlide to add new slide with any data you need:

Fancybox.getInstance().carousel.appendSlide({src : "https://lipsum.app/id/11/300x225/", caption : "My Caption"});

[JorisPersua]

Sorry if my questions was unclear, I'm a bit new to how to implement this kind of code.

I'll try to give more context. The way the my setup currently works is as follows.

I have an image gallery setup with captions-data added in the HTML At fist I load in 25 items when scrolling down further 25 more items will be added to the DOM via AJAX

In the Lightbox this AJAX load more happens when on the last slide, Then the additional 25 items get added to the DOM. Is there a way for the appendSlide to add these newly added 25 elements to the Lightbox without closing it?

Hope this is a bit more clear

[fancyapps]

So, you are looking for a way to append multiple slides at once? Then either call it multiple times or pass an array of objects:

Fancybox.getInstance().carousel.appendSlide([
  {
    src : "https://lipsum.app/id/11/300x225/", 
    caption : "My Caption"
  }, 
  {
    src : "https://lipsum.app/id/12/300x225/",
    caption : "Another Caption"
  }
]);