Astro.js support #1662

cengique · 2024-09-09T19:26:43Z

Summary

Usage example of Lightgallery with Vite-based frameworks (Next.js, Astro.js, ...)

Basic example

We just got LightGallery to work under Astro.js. Not sure this is the best way, but it's a working example. Vue.js examples from the website somehow didn't work and the StackBlitz demo was also old/broken.

---
import LightGallery from 'lightgallery/vue'; 

/* Couldn't get plugins to work yet
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

const plugins = [lgThumbnail, lgZoom];
*/
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-thumbnail.css';
import 'lightgallery/css/lg-zoom.css';

interface PhotoProps {
  src: string;
  alt: string;
  link?: string;
  caption?: string;
}

interface Props {
  photos: PhotoProps[];
}

const { photos } = Astro.props;
---

<LightGallery client:load settings={ { speed: 500, selector: ".gallery-item" /*, plugins: plugins*/ } }>
  <div id="light-gallery">
    {photos.slice(0, 9).map((Photo, index) => (
      <a href={Photo.link || Photo.src} class="gallery-item">
        <img alt={Photo.alt} src={Photo.src} />
        {Photo.caption && <p class="caption">{Photo.caption}</p>}
      </a>
    ))}
  </div>
</LightGallery>

Motivation

Easier integration with new frameworks.

stale · 2024-11-09T16:18:35Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

monaye · 2024-11-14T19:41:00Z

@sachinchoolur do you have a official docs how to use the plugin for the Astro project? with .astro file?

I tried following @cengique (without /vue) code, and getting window is not defined error.

---
import Header from "../components/Header.astro";
import BaseHead from "../components/BaseHead.astro";

import LightGallery from "lightgallery";

import "lightgallery/css/lightgallery.css";
import "lightgallery/css/lg-thumbnail.css";
import "lightgallery/css/lg-zoom.css";
import { ProjectBlockLayout } from "../types/Projects";
import { getGalleryPage } from "../lib/api";

const SITE_TITLE = " Gallery";
const SITE_DESCRIPTION = " Gallery";

const galleryPage = await getGalleryPage();
---

<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
  <body>
    <Header />
    <main>
      <LightGallery
        client:load
        settings={{
          speed: 500,
          selector: ".gallery-item" /*, plugins: plugins*/,
        }}
      >
        <div id="lightgallery">
          {
            galleryPage[0]?.acf.block.map((block) => {
              if (block.acf_fc_layout === ProjectBlockLayout.SingleImage) {
                return (
                  <a href={block.image.url}>
                    <image src={block.image.url} alt={block.image.alt} />
                  </a>
                );
              }
            })
          }
        </div>
      </LightGallery>
    </main>
  </body>
</html>

stale bot added the v1 label Nov 9, 2024

stale bot removed the v1 label Nov 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Astro.js support #1662

Astro.js support #1662

cengique commented Sep 9, 2024

stale bot commented Nov 9, 2024

monaye commented Nov 14, 2024 •

edited

Loading

Astro.js support #1662

Astro.js support #1662

Comments

cengique commented Sep 9, 2024

Summary

Basic example

Motivation

stale bot commented Nov 9, 2024

monaye commented Nov 14, 2024 • edited Loading

monaye commented Nov 14, 2024 •

edited

Loading