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 · 2025-01-15T06:27:07Z

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.

cengique · 2025-01-18T00:06:52Z

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

@monaye we have a working example here if you want to compare your approach:

https://github.com/TAP-GGC/tap-ws1-astro-agnosticui/blob/main/src/components/astro/Gallery.astro

---
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>

I think this approach will not work because the Javascript part in Astro files are dehydrated and only get executed during compilation and then they disappear once the page is rendered. If you want active Javascript in Astro pages, you need to put them inside <script> tags. Then the code can refer to functions that were defined in the dehydrated section.

stale bot added the v1 label Nov 9, 2024

stale bot removed the v1 label Nov 14, 2024

stale bot added the v1 label Jan 15, 2025

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

stale bot commented Jan 15, 2025

cengique commented Jan 18, 2025

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

stale bot commented Jan 15, 2025

cengique commented Jan 18, 2025

monaye commented Nov 14, 2024 •

edited

Loading