Dynamic LightGallery, loading new gallery items

[DBadke]

LightGallery 2.5.0, Windows 10, Firefox

I have a gallery with two sets of images (both sets have the same images but in a different order and with different captions). The user can toggle between the sets using a custom button in the toolbar. My setup is (simplified):

<div id="inline-gallery-container" class="inline-gallery-container">
</div>

<script type="text/javascript">
  var imgList1 = [
    {src: 'img1.jpg',
     thumb: 'timg1.jpg',
     subHtml: 'Set 1 Image 1'
    },
    {src: 'img2.jpg',
     thumb: 'timg1.jpg',
     subHtml: 'Set 1 Image 2'
    },
    {src: 'img3.jpg',
     thumb: 'timg2.jpg',
     subHtml: 'Set 1 Image 3'
  }];
  
  var imgList2 = [
    {src: 'img3.jpg',
     thumb: 'timg3.jpg',
     subHtml: 'Set 2 Image 1'
    },
    {src: 'img1.jpg',
     thumb: 'timg1.jpg',
     subHtml: 'Set 2 Image 2'
    },
    {src: 'img2.jpg',
     thumb: 'timg2.jpg',
     subHtml: 'Set 2 Image 3'
  }];
</script>

<script type="text/javascript">
  const lgContainer = document.getElementById('inline-gallery-container');

  lgContainer.addEventListener("lgInit", (event) => {
      let lgInstance = event.detail.instance;
      const toggleBtn =
        '<button type="button" aria-label="Toggle" id="b-lg-toggle" class="b-lg-toggle lg-icon" alt="Toggle" title="Toggle"></button>';
      const toggleStatus = 
        '<span id="toggle-status" class="toggle-status">First Set</span>';
      
      lgInstance.outer.find(".lg-toolbar").append(toggleBtn);
      lgInstance.outer.find(".lg-counter").append(toggleStatus);
    }
  });  

  const inlineGallery = lightGallery(lgContainer, {
    plugins: [lgZoom, lgThumbnail, lgFullscreen],
    container: lgContainer,
    dynamic: true,
    showMaximizeIcon: true,
    closable: false,
    hash: false,
    speed: 500,
    showZoomInOutIcons: true,
    scale: 0.3,
    actualSize: true,
    actualSizeIcons: {
      zoomIn: 'lg-actual-size',
      zoomOut: 'lg-actual-size', 
    },
    allowMediaOverlap: false,
    toggleThumb: true,
    dynamicEl: imgList1
  });

  inlineGallery.openGallery();

  inlineGallery.outer.find('#b-lg-toggle').on('click', () => {
    const curToggle = document.getElementById("toggle-status").innerText.substr(0, 5);
    if (curToggle == 'First') {
      inlineGallery.refresh(imgList2);
      document.getElementById("toggle-status").innerText = 'Second Set';
    }
    else {
      inlineGallery.refresh(imgList1);
      document.getElementById("toggle-status").innerText = 'First Set';
    }
    inlineGallery.slide(0);
  });
</script> 

The two image sets are defined as imgList1 and imgList2 in the first script (this block is generated offline). The first code block in the second script adds a custom button to the toolbar, and a text element to show which set is active. The gallery object is set up and opened (using imgList1 initially), then an on click event is added to the custom button. So far everything works as expected.

The user clicks the custom button. The click event function determines that imgList1 is active and switches to imgList2 with the refresh() method, then updates the status element, and jumps to slide 0. In the gallery, the thumbnails show the new set. If I put a breakpoint just after the refresh() call and check the inlineGallery.galleryItems array, it contains the correct image set (imgList2) data. But... the image being shown is NOT the correct image from imgList2 - that is, the image does not match the the thumbnail or the caption (which are correct). When scrolling through the images with the arrows or by clicking a thumbnail, the wrong images continue to be shown though the highlighted thumbnail shows the correct image and the caption shows the correct data and the inlineGallery.galleryItems array still contains the data from imgList2. Toggling back to imgList1 does not resolve the problem; the displayed image still does not match the thumbnail and caption.

Somehow the synchronization between the image specified in the src element in the inlineGallery.galleryItems array and the image that is actually displayed gets messed up. Is this a caching issue? Or is there something I need to do (other than or in addition to the refresh() call) to get everything to match up again? I have spent hours on this and I am baffled!

David

[DBadke]

Well, I now understand the problem. All I need is a solution.

When the gallery is opened some slides on either side of the current slide are preloaded, and as the user scrolls through the slides the preload continues, so there are always some preloaded slides for previous slide and next slide. The divs containing the preloaded but not yet visible slides get the class "lg-loaded" added to them to tell the loader it doesn't need to reload the image. That is where the problem is. The refresh() method does not "unload" the preloaded slides, so when it is time to display the next/previous slide, the preloaded div is still there from the original image set (with the picture element pointing to the old image), and since it has the "lg-loaded" class it is used as-is, thus displaying the wrong image. So it is sort of a caching problem: the preloaded slides are "cached" and don't go away when the refresh() method is called with a new set of image definitions.

I haven't found any public method that would clear the "cached" preloaded slides. Ideally the refresh() method would do that, instead of assuming the preloaded slides are still valid.

I suppose understanding the problem is a step towards solving it...

[DBadke]

I got this to work by destroying the existing LightGallery instance and creating a new one when the button is clicked, with the new image set as the dynamicEl attribute. It makes the code more complicated than necessary, but it works. My script is attached in case it might be useful to someone.

loadLightGallery.txt

[Lex-2008]

I don't know if it would help your case, but I had to additionally execute lightgallery.updateSlides.

[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 ?

[Dji75]

Any news on this issue ?