javascript - How to update list of items (reinitialize)? - Stack Overflow

admin管理员组

文章数量:1122832

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);

                    }
                });
    }
}

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.

本文标签： javascriptHow to update list of items (reinitialize)Stack Overflow