--- title: "Verwenden von PhotoSwipe in Astro zum Erstellen einer Bildergalerie" description: "Wie erstelle ich mit PhotoSwipe eine Bildergalerie in einer Astro-Anwendung?" source: "https://www.launchfa.st/de/blog/photoswipe-astro" author: "Rishi Raj Jain" created_at: 2024-04-24T00:00:00.000Z --- > **Site index for agents** > Fetch https://www.launchfa.st/llms.txt to discover every page on this site. > Every page is also available as Markdown by appending `.md` to its URL. 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](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher ## Inhaltsverzeichnis - [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application) - [Integrieren Sie PhotoSwipe in Ihr Astro-Projekt](#integrate-photoswipe-in-your-astro-project) - [PhotoSwipe SDK installieren](#install-photoswipe-sdk) - [Eine Bildersammlung erstellen](#create-an-image-collection) - [Verwandeln Sie Ihre Bildersammlung in eine Bildergalerie](#turn-your-image-collection-into-an-image-gallery) - [Erstellen und testen Sie Ihre Astro-Anwendung lokal](#build-and-test-your-astro-application-locally) - [Quellcode](#source-code) - [Schlussfolgerung](#Schlussfolgerung) ## Erstellen Sie eine neue Astro-Anwendung Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus: ```bash 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: ```bash cd my-app npm run dev ``` Die App sollte auf [localhost:4321](http://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: ```bash 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 ```astro {3,13,16-37} --- // File: src/pages/index.astro // [!code focus] import { ViewTransitions } from "astro:transitions"; --- // [!code focus] Astro ``` ### 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: ```astro {38-54} --- // File: src/pages/index.astro // [!code focus] import { ViewTransitions } from "astro:transitions"; --- // [!code focus] Astro ``` 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: ```bash npm run build && npm run preview ``` ## Quellcode Um alles wie in dieser Anleitung vorgefertigt zu bekommen, besuchen Sie bitte https://github.com/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](https://twitter.com/direct_messages/create/rishi_raj_jain_).