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: [
    // srcs is NOT provided in layout.srcs, so images are rendered using <img>
    // the images are in /public repo, and the src path is the one on the server (without /public)
    { src: "/img01.jpg", },
    { src: "/img02.jpg", },
    ...
  ]
}}
options={{
  thumbnail: true,
}}
/>

Google Photos Layout

When using layout.type: 'google-photos', the gallery is displayed with the same layout as Google Photos. The height and the max-height of the gallery can be customized, as well as the breakpoints.

Typically, the gallery displayed withe the default parameters

<LightGallery
  layout={{
    type: 'google-photos',
    imgs: [...],
  }}
/>

which is the same as

<LightGallery
  layout={{
    type: 'google-photos',
    imgs: [...],
    googlePhotos: {
      height: '45vw',
      maxHeight: '45vw',
      breakpoints: {
        601: { height: '20vw', maxHeight: '205px' },
      }
    }
  }}
/>

Here is an example of the lightgallery with the google photos layout. It is using layout.srcs in order to use astro’s <Image> component to render the gallery images, and to have optimized images. No thumbnail specific images as <Image> optimizes it.

Full code

Code Snippet

---
import { LightGallery } from 'astro-lightgallery'
---
<LightGallery
layout={{
  type: 'google-photos',
  imgs: [
    // srcs is provided via layout.srcs, so imgs will be rendered using <Image>
    // the images are in /src repo
    { src: "/src/images/astro-lightgallery/img01.jpg", },
    { src: "/src/images/astro-lightgallery/img02.jpg", position: '50% 100%' },
    ...
  ],
  srcs: import.meta.glob<{ default: ImageMetadata }>('/src/images/**/*.{jpg,webp}'),
  googlePhotos: {
    height: '45vw',  // default height of the gallery
    maxHeight: '45vw',
    breakpoints: {
      320: {  // on screen larger than 320px
        height: '30vw',
        maxHeight: '30vw',
      },
      720: {  // on screen larger than 720px
        height: '200px',
        maxHeight: '200px',
      },
    },
  },
}}
/>

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 'astro-lightgallery/lightgallery';
import type { AstroLightGalleryLayoutType } from 'astro-lightgallery';

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

const layout: AstroLightGalleryLayoutType = {
type: 'adaptive',
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>