Doubt with Inline Gallery and TS

[isaitamatf]

Good morning,

I am very interested in licensing lightGallery, but I want to make an InlineGallery but working with TS all properties are GalleryItem interface are required.

Could you send me or redirect me to an example of this implementation?

[sachinchoolur]

Hey @IsaacBC93,
Looks like this is a real issue. I'll push a fix ASAP.
For now, please cast the type dynamicEl as GalleryItem []

dynamicEl: [
    {...},
  ] as GalleryItem [],

[isaitamatf]

This solution doesn't give me any errors in the console or in the code, but when I run the program, react doesn't render anything that uses the dynamicEl prop.

  public render() {
    const dynamicEl = [
      {
        src:
          'https://i2.wp.com/hipertextual.com/wp-content/uploads/2014/03/windows_xp_bliss-wide.jpg?fit=1920%2C1200&ssl=1',
        thumb:
          'https://i2.wp.com/hipertextual.com/wp-content/uploads/2014/03/windows_xp_bliss-wide.jpg?fit=1920%2C1200&ssl=1',
        subHtml: `<div class="lightGallery-captions">
                      <h4>Photo by User</h4>
                      <p>Published on November 13, 2021</p>
                  </div>`,
      },
      {
        src:
          'https://wallpaperaccess.com/full/3296446.jpg',
        thumb:
          'https://wallpaperaccess.com/full/3296446.jpg',
        subHtml: `<div class="lightGallery-captions">
                      <h4>Photo by User</h4>
                      <p>Published on November 13, 2021</p>
                  </div>`,
      },
      {
        src:
          'https://uhdwallpapers.org/uploads/converted/19/07/07/windows-10-hero-redesign-wallpaper-1920x1200_899885-mm-90.jpg',
        thumb:
          'https://uhdwallpapers.org/uploads/converted/19/07/07/windows-10-hero-redesign-wallpaper-1920x1200_899885-mm-90.jpg',
        subHtml: `<div class="lightGallery-captions">
                      <h4>Photo by User</h4>
                      <p>Published on November 13, 2021</p>
                  </div>`,
      },
    ] as GalleryItem[];

    return (
      <div className="teno-gallery-component">
        <LightGallery
          allowMediaOverlap
          dynamic
          hash={false}
          closable={false}
          showMaximizeIcon
          appendSubHtmlTo=".lg-item"
          slideDelay={400}
          speed={500}
          plugins={[lgThumbnail, lgZoom]}
          dynamicEl={dynamicEl}
          thumbWidth={60}
          thumbHeight="40px"
          thumbMargin={4}
        />
      </div>
    );
  }

[sachinchoolur]

When you use dynamic mode, you need to call openGallery method to open lightGallery
Here is the demo - https://stackblitz.com/edit/lightgallery-react-dynamic-mode

Please take a look and let me know if you have any questions

[isaitamatf]

Thank you very much for the example, now everything works correctly.