Verwenden von PhotoSwipe in Astro zum Erstellen einer Bildergalerie
LaunchFast Logo LaunchFast

Verwenden von PhotoSwipe in Astro zum Erstellen einer Bildergalerie

Rishi Raj Jain
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:

Inhaltsverzeichnis

Erstellen Sie eine neue Astro-Anwendung

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

Terminal window
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:

Terminal window
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:

Terminal window
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:

“-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"
/>
</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"
/>
</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"
/>
</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"
/>
</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:

Terminal window
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.

Learn More Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024
Schneller Start mit Astro 4.16
Schneller Start mit Astro 4.16 October 23, 2024