Reinitialize the gallery with new links

[girija45701]

I am using Blueimp gallery for one of my scenarios. I have a search box (on the same page above the gallery) and logic that takes this search term and gets some image links (based on the search term) I use that list of images to create the array of objects which i pass to the gallery initializations with the new list. Something like this:

function updateCarousel(carouselLinks) {

if (carouselLinks.length > 0) {
    gallery = blueimp.Gallery(carouselLinks, {
                container: '#blueimp-image-carousel',
                carousel: true,
                onslide: function (index, slide) {
                    var data = this.list[index];
                    $('#filenameinput').val(data.title);

                }
            });
}

}

$(".seachButton").on("click",function(){

 var searchText = $(".seachtextbox").val();
 var carouselLinks = serachLinksBasedOnSearchText(searchText);  // This is where Logic to get links based on search Text

updateCarousel(carouselLinks);

});

This works with the update of the gallery images, but the issue is with the prev, next and play-pause button. Let me explain : Say my first search returned only one image. I initialize the gallery with one image, so there is no prev,next, play-pause button. Next search , lets say return 3 images. When i pass the data, it basically adds 3 images, but the buttons do not appear, but default play shows me that there are 3 images now in the gallery.

I tried using the close API method, but it did not allow me to add the images (once i have closed it). Seems it disposes the gallery altogether.

I have tried setting the CSS:

.blueimp-gallery > .prev,
.blueimp-gallery > .next,
.blueimp-gallery > .close,
.blueimp-gallery > .title,
.blueimp-gallery > .play-pause {
display: block;
}

The above code does show the buttons in gallery at all times, but that is not what is needed. I want to re-initialize the gallery when the search is changed, but there is no method for the same.

I also tried to use the close method, but that is not working, it displays a blank.

function updateCarousel(carouselLinks) {

if (carouselLinks.length > 0) {
    
    if(gallery != null) {
        gallery.close();
    }

    gallery = blueimp.Gallery(carouselLinks, {
                container: '#blueimp-image-carousel',
                carousel: true,
                onslide: function (index, slide) {
                    var data = this.list[index];
                    $('#filenameinput').val(data.title);

                }
            });
}

}

Need help on this issue