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

Minimall Animated Thumbnail

Minimal setup, with the default layout of the gallery, which is adaptive. When selecting an image, it is showed zoomed, with a thumbnail below it.

Note that the gallery is displayed in a single line, where options are the lightgallery options (thumbnail, zoom,…), and layout contains the images to display:

• <LightGallery options={...} layout={...} />

Full code

Code Snippet

---
import { LightGallery } from 'astro-lightgallery'
---
<LightGallery
layout={{
  imgs: [
    { src: "/img01.jpg", },
    { src: "/img02.jpg", },
    ...
  ]
}}
options={{
  thumbnail: true,
}}
/>

Enhanced Static Thumbnail

The minimal setup presented above is enriched:

• using small (for the gallery itself) and large images (when clicking on an image of the gallery)
• adding alt
• adding caption, displayed when zooming on a picture
• the adaptive layout is displayed at 50% of its original size
• the gallery has a lightgrey background, and an opacity effect is added when hovering images

Also, more arguments are provided in the thumbnail, to have a static thumbnail display.

Note that the gallery is displayed in a single line:

• <LightGallery options={options} layout={layout} />

Full code

Code Snippet

---
import { LightGallery } from 'astro-lightgallery'
import type { LightGallerySettings } from 'lightgallery/lg-settings';
import type { AstroLightGalleryLayoutType } from 'astro-lightgallery';

const options: LightGallerySettings = {
animateThumb: false,
...
}

const layout: AstroLightGalleryLayoutType = {
imgs: [
  {
    src: "//img01.jpg",
    srcThumb: "//img-thumb01.jpg",
    alt: "layers of blue.",
    subHtml: "<h4>Photo by - <a href='https://unsplash.com/@tobbes_rd'> Tobias Rademacher</a>,</h4><p> Location - <a href='https://unsplash.com/s/photos/puezgruppe%2C-wolkenstein-in-gr%C3%B6den%2C-s%C3%BCdtirol%2C-italien'> Puezgruppe, Wolkenstein in Gröden, Südtirol, Italien</a>,layers of blue.</p>",
  },
  ...
],

// customize the adaptive layer
adaptive: {
  zoom: 50,   // 50% zoom on the main gallery with all images
              // this makes it smaller than the default size
},

// enrich the css style of the layout, with a lightgrey background,
// and a hover effect - cf. <style> section at the end of the file
classContainer: 'my-container-thumbnail-static',
classItem: 'my-item-thumbnail-static',
}
---

<LightGallery options={options} layout={layout} />

<style is:global>
.my-container-thumbnail-static {
  background-color: lightgrey;
}

.my-item-thumbnail-static {
  border: 1px solid black;
  opacity: 80%;
}

.my-item-thumbnail-static:hover {
  opacity: 100%;
}

.my-item-thumbnail-static img {
  /* nothing to add */
}
</style>

Autoplay, Zoom and Thumbnail

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

No layout is used. So the user has full capabilities to customize its gallery. You can then use your own library to display the main gallery.

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.srcSmall}>
        <img src={img.srcFull} />
    </a>
  ))
}
</LightGallery>