1

I'm using ngx-gallery to display images. I want to reload the images or have them refreshed in the thumbnail gallery, main image and full page image when I modify the order (ex. swap image 1 and 3 in the image array)

Problem - I can't figure out how to reload/reset/rerender/refresh the thumbnail gallery. If there isn't a ngx-gallery way to do it, maybe there is a typescript way?

Here is what I've tried so far

<ngx-gallery #gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

In my .ts file

  1. set images to null then replaced the images:

    this.galleryImages = null;

    this.galleryImages = this.memberService.member.photos;

  2. used the show(0) method from the documentation - displayed image 0 but didn't rearrange order in the thumbnail gallery

    @ViewChild('gallery') gallery: NgxGalleryComponent;

    this.gallery.show(0);

  3. I also tried

    this.gallery.thubmnails.reset(1);

    this.gallery.thubmnails.reset(0);

    this.gallery.ngOnInit();

Update - I found the thumbnail property inside the component, so I can change the thumbnail ordering, but can't still find a way to alter the main image ordering.

Here is what I did to alter the thumbnail ordering

[this.gallery.thubmnails.images[index], this.gallery.thubmnails.images[0]]
    = [this.gallery.thubmnails.images[0], this.gallery.thubmnails.images[index]];

but this doesn't change the order of the other images and when I tried to use the same approach it didn't work for the bigger (full page, page) images.

Update2 I used an interval to provide a work around and get it to do what I wanted. After I reordered 'this.memberService.member.photos', I cleared out the array then reset it with values. Without the interval it doesn't work.

[this.memberService.member.photos[index], this.memberService.member.photos[0]]
    = [this.memberService.member.photos[0], this.memberService.member.photos[index]];
this.galleryImages = [];
setInterval(() => {
  this.galleryImages = this.memberService.member.photos;
}, 0);
chuckd
  • 13,460
  • 29
  • 152
  • 331

0 Answers0