astro-lightgallery

Install

npm install astro-lightgallery

Read the full doc on Github

LightGallery documentation can be found on lightgalleryjs.com

License

Astro-lightGallery is released under the MIT license.

Astro-lightGallery is using lightGallery. lightGallery is a free and open-source library, however, if you are using the library for business, commercial sites, projects, and applications, choose the commercial license to keep your source proprietary, to yourself. Please refer to the lightGallery license page

Examples

Animated Thumbnail

Gallery, when selecting an image, show it zoomed, with a thumbnail belox it.

Full code

Code Snippet

---
import { LightGallery } from 'astro-lightgallery'
---
<LightGallery
class="mygallery-container"
options={{
  thumbnail: true,
  }} >
{
  imgs.map(img => (
    <a class="mygallery-one-img" href={img.srcFull}>
        <img src={img.srcThumb} />
    </a>
  ))
}
</LightGallery>

Autoplay, Zoom and Thumbnail

A tumbnailed gallery, with a button to zoom, and another one to autoplay the gallery when a picture is selected.

Full code

Code Snippet

---
import { LightGallery } from 'astro-lightgallery'
---

<LightGallery
class="..."
options={{
  thumbnail: true,
  autoplay: true,
  slideShowInterval: 500,
  }}
addPlugins={[ 'zoom' ]}
>
{
  imgs.map(img => (
    <a class="..." href={img.srcFull}>
        <img src={img.srcFull} />
    </a>
  ))
}
</LightGallery>