Usando PhotoSwipe en Astro para crear una galería de imágenes
LaunchFast Logo LaunchFast

Usando PhotoSwipe en Astro para crear una galería de imágenes

Rishi Raj Jain
Using PhotoSwipe in Astro to Build an Image Gallery

En esta guía, aprenderá cómo usar PhotoSwipe en una aplicación Astro. Pasará por el proceso de configurar un nuevo proyecto Astro, instalar el módulo PhotoSwipe y convertir su colección de imágenes en una galería de imágenes.

Requisitos previos

Necesitará lo siguiente:

Tabla de contenido

Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

Terminal window
npm create astro@latest my-app

npm create astro es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

  • Empty cuando se le pregunta cómo iniciar el nuevo proyecto
  • cuando se le pregunte si planea escribir Typecript
  • Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
  • cuando se le solicita instalar dependencias
  • cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

Terminal window
cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321

Ahora, pasemos a integrar PhotoSwipe en tu aplicación Astro.

Integra PhotoSwipe en tu proyecto Astro

Instalar el SDK de PhotoSwipe

Ejecute el siguiente comando para instalar el paquete necesario para usar PhotoSwipe:

Terminal window
npm install photoswipe
npm install -D @types/photoswipe

El comando instala la siguiente biblioteca:

  • photoswipe: una biblioteca de galería de imágenes de JavaScript independiente del marco
  • @types/photoswipe: definiciones de tipos para la biblioteca photoswipe

Crear una colección de imágenes

Usar PhotoSwipe (con la configuración predeterminada) requiere dos cosas:

  • Un elemento HTML principal (más comúnmente, un <div>) que contiene todas las imágenes.
  • Cada imagen debe incluirse en una etiqueta <a> que contiene los atributos alto y ancho de la imagen.
Learn More Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024
Schneller Start con Astro 4.16
Schneller Start con Astro 4.16 October 23, 2024