Verwenden von PhotoSwipe in Astro zum Erstellen einer Bildergalerie

Using PhotoSwipe in Astro to Build an Image Gallery

In dieser Anleitung erfahren Sie, wie Sie PhotoSwipe in einer Astro-Anwendung verwenden. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Installation des PhotoSwipe-Moduls und der Umwandlung Ihrer Bildersammlung in eine Bildergalerie

Voraussetzungen

Sie benötigen Folgendes:

Nodejs 18 oder höher

Inhaltsverzeichnis

Eine neue Astro-Anwendung erstellen
Integrieren Sie PhotoSwipe in Ihr Astro-Projekt
Erstellen und testen Sie Ihre Astro-Anwendung lokal
Quellcode
Schlussfolgerung

Erstellen Sie eine neue Astro-Anwendung

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

npm create astro@latest my-app

„npm create astro“ ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen

Wenn Sie dazu aufgefordert werden, wählen Sie:

„Leer“, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll
„Ja“, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten
„Streng“, wenn Sie gefragt werden, wie streng Typescript sein soll
„Ja“, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren – „Ja“, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren

Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:

cd my-app
npm run dev

Die App sollte auf localhost:4321 ausgeführt werden.

Kommen wir nun zur Integration von PhotoSwipe in Ihre Astro-Anwendung

Integrieren Sie PhotoSwipe in Ihr Astro-Projekt

Installieren Sie das PhotoSwipe SDK

Führen Sie den folgenden Befehl aus, um das erforderliche Paket für die Verwendung von PhotoSwipe zu installieren:

npm install photoswipe
npm install -D @types/photoswipe

Der Befehl installiert die folgende Bibliothek:

„photoswipe“: Eine Framework-unabhängige JavaScript-Bildergalerie-Bibliothek
„@types/photoswipe“: Typdefinitionen für die „photoswipe“-Bibliothek

Erstellen Sie eine Bildersammlung

Für die Verwendung von PhotoSwipe (mit der Standardkonfiguration) sind zwei Dinge erforderlich:

Ein übergeordnetes HTML-Element (am häufigsten ein „
“), das alle Bilder enthält
Jedes Bild muss in ein „“-Tag eingeschlossen werden, das die Attribut „Höhe“ und „Breite“ des Bildes enthält

“-Element nicht den Stil Ihrer „“-Elemente übernimmt, können Sie das folgende CSS verwenden, um nur seine untergeordneten Elemente darzustellen: „display: content;“ In Im folgenden Beispiel verwenden Sie die Klasse „contents“ von Tailwind CSS

---
// File: src/pages/index.astro // [!code focus]
import { ViewTransitions } from "astro:transitions";
---
// [!code focus]
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <ViewTransitions />
  </head>
  <body>
    <div id="my-gallery" class="grid grid-cols-1 py-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow-sm"
        />
      </a>
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow-sm"
        />
      </a>
    </div>
  </body>
</html>

Verwandeln Sie Ihre Bildersammlung in eine Bildergalerie

Mit PhotoSwipe können Sie Ihre Bildersammlung in minimalen Codezeilen in eine interaktive Bildergalerie umwandeln. Dies geht ganz einfach in drei Schritten:

Importieren Sie das „PhotoSwipe“-CSS
Importieren Sie das Modul „PhotoSwipe“.
Erstellen Sie einen Leuchtkasten mit „PhotoSwipe“.

Sehen Sie sich das folgende Skript an, um die oben genannten Schritte in diesem Beispiel auszuführen:

---
// File: src/pages/index.astro // [!code focus]
import { ViewTransitions } from "astro:transitions";
---
// [!code focus]
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <ViewTransitions />
  </head>
  <body>
    <div id="my-gallery" class="grid grid-cols-1 py-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow-sm"
        />
      </a>
      <a href="https://picsum.photos/900/1600" data-pswp-width="900" data-pswp-height="1600" class="contents">
        <img
          width="900"
          height="1600"
          loading="lazy"
          decoding="async"
          src="https://picsum.photos/900/1600"
          class="absolute h-[250px] w-[300px] object-cover shadow-sm"
        />
      </a>
    </div>
    <script>
      import 'photoswipe/style.css'
      import pswpModule from 'photoswipe'
      import PhotoSwipeLightbox from 'photoswipe/lightbox'

      const lightbox = new PhotoSwipeLightbox({
        pswpModule,
        children: 'a',
        gallery: '#my-gallery',
      })

      document.addEventListener(
        'astro:page-load',
        () => { if (lightbox) lightbox.init() },
        { once: false },
      )
    </script>
  </body>
</html>

Im obigen Code haben Sie Folgendes getan:

Das „PhotoSwipe“-CSS wurde importiert
Es wurde eine Lightbox erstellt, die auf Klicks auf alle „“-Elemente lauscht, die hirrachly im HTML-Element vorhanden sind, das „my-gallery“ als ID-Attribut hat
Fügt einen Astro-Seitenlade-Listener hinzu und aktiviert die Lightbox. Diese Art der Instanziierung der Lightbox ist hilfreich, da dieses Skript auch mit aktivierten Ansichtsübergängen in Ihrer Astro-Anwendung verwendet werden kann

Erstellen und testen Sie Ihre Astro-Anwendung lokal

Um die Anwendung zu testen, bereiten Sie einen Build vor und führen Sie den Vorschauserver mit dem folgenden Befehl aus:

npm run build && npm run preview

Quellcode

Um alles wie in dieser Anleitung vorgefertigt zu bekommen, besuchen Sie bitte https://githubcom/rishi-raj-jain/astro-photoswipe-starter

Abschluss

In dieser Anleitung haben Sie erfahren, wie Sie PhotoSwipe in einer Astro-Anwendung verwenden, um eine Bildergalerie zu erstellen

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.