Dynamic LightGallery, loading new gallery items

[DBadke]

Issue: When calling the refresh(items) method, preloaded previous/next slides are not reloaded.

See the discussion in https://github.com/sachinchoolur/lightGallery/discussions/1341 for background to this issue.

The gallery preloads an number of slides for the previous slide and next slide. The structure when slide index 7 is visible is:

<div id="lg-inner-1" class="lg-inner" style="transition-timing-function: ease; transition-duration: 500ms;">
  <div id="lg-item-1-6" class="lg-item lg-loaded lg-complete lg-complete_ lg-zoomable lg-prev-slide">
    <picture class="lg-img-wrap"> 
      <img class="lg-object lg-image" data-index="6" src="img6.jpg">
    </picture>
  </div>
  <div id="lg-item-1-7" class="lg-item lg-complete lg-complete_ lg-zoomable lg-loaded lg-next-slide lg-current">
    <picture class="lg-img-wrap"> 
      <img class="lg-object lg-image" data-index="7" src="img7.jpg">
    </picture>
  </div>
  <div id="lg-item-1-8" class="lg-item lg-loaded lg-complete lg-complete_ lg-zoomable">
    <picture class="lg-img-wrap"> 
      <img class="lg-object lg-image" data-index="8" src="img8.jpg">
    </picture>
  </div>
</div>

My code loads a new set of image definitions using the refresh() method:

galleryInstance.refresh(newItemArray);

This loads the new set of images, but refresh() DOES NOT unload/clear/invalidate/reload the preloaded image elements. The original preloaded image [div][picture][img] elements (as shown above) are never updated with the new image src, so when a slide becomes current, the existing [div] element is used as-is and it displays the wrong image.

Shouldn't refresh() reload the preloaded slides with the new data? Or is there some other method I could call instead of/in addition to refresh() to reload the outdated [div][picture][img] elements to make them match the new data, or maybe zap them to force a reload?

David

[DBadke]

I have got my code to work by destroying the LightGallery instance and creating a new one. This significantly complicates my code, but I don't see any other way to do it.

I still think the refresh() method should reload the preloaded [div][picture][img] elements to reflect the new data, so recreating the LightGallery instance would not be necessary.

[sachinchoolur]

Yes, the refresh method should refresh the preloaded slides as well.

Is it possible to share a codepen demo that reproduces the issue?

[DBadke]

It would be difficult to reproduce in CodePen because of all the images needed. I will try to put an example on my web site, but I would have to reconstruct the old code, and it is not a high priority right now since the "destroy/re-create" method works. For now I can only refer you to the discussion in https://github.com/sachinchoolur/lightGallery/discussions/1341.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Dji75]

I've made a stackblitz example which reproduce the problem but either with updateSlides or refresh, it does not solve the problem. New items are displayed but slides are not updated accordingly

https://stackblitz.com/edit/angular-pgwmhf?file=src%2Fmain.ts,src%2Fgallery.component.ts,src%2Fglobal_styles.css,src%2Findex.html

What's wrong with dynamic update ?