lukasz-galka/ngx-gallery

Gallery gets confused when datasource changes

jaco-fq opened this issue · 2 comments

Issue 1: Whenever you change the images data source, the gallery switches to the first image (index 0) of the new images array. It would be better if the gallery would remain on the current index in the array (if it exists, otherwise it would be acceptable to go to index 0).

Issue 2: The internal 'current image index' (let's say 5) is however not reset to 0 when the data source changes. The gallery thinks it's still showing image 5. So if you manually try to change it to image 5 in the new array, the gallery does not react because it thinks it's already showing it.

The workaround is to switch the gallery to some index other than 5, and then switch it back to 5 (with some timeout in between to allow for the gallery to react). This works, but causes some visual issues.

It would be nice if the gallery would just remain on the same image index between data source changes.

An example use case: Lazy loading images from a remote source (e.g. an API). I would like to only load thumbnails, and load the full image only when it is being viewed. This requires me to change the data source when the image is changed.

In my case i needed only to change src`s of images, so i achieve this by directly setting smallImages, mediumImages and bigImages like this

this.ngxGalleryComponent.smallImages = this.galleryImages.map(x => x.small)

this.ngxGalleryComponent.mediumImages = this.galleryImages.map((x, i) => new
NgxGalleryOrderedImage({ src: x.medium, index: i }))

this.ngxGalleryComponent.bigImages = this.galleryImages.map(x => x.big)

@Krzysiek1472 Your solution worked perfectly! You saved my day!