--- title: "Usando PhotoSwipe en Astro para crear una galería de imágenes" description: "¿Cómo crear una galería de imágenes en una aplicación Astro usando PhotoSwipe?" source: "https://www.launchfa.st/es/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 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: - [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior ## Tabla de contenido - [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro) - [Integra PhotoSwipe en tu proyecto Astro](#integrar-photoswipe-en-tu-proyecto-astro) - [Instalar PhotoSwipe SDK](#install-photoswipe-sdk) - [Crear una colección de imágenes](#crear-una-coleccion-de-imagenes) - [Convierte tu colección de imágenes en una galería de imágenes](#convierte-tu-coleccion-de-imagenes-en-una-galeria-de-imagenes) - [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente) - [Código fuente](#código-fuente) - [Conclusión](#conclusión) ## Crea una nueva aplicación Astro Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando: ```bash 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 - `Sí` cuando se le pregunte si planea escribir Typecript - `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript. - `Sí` cuando se le solicita instalar dependencias - `Sí` cuando se le solicita inicializar un repositorio de git Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación: ```bash cd my-app npm run dev ``` La aplicación debería estar ejecutándose en [localhost:4321](http://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: ```bash 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 `
`) que contiene todas las imágenes. - Cada imagen debe incluirse en una etiqueta `` que contiene los atributos `alto` y `ancho` de la imagen. ` no se haga cargo del estilo de sus elementos ``, puede usar el siguiente CSS para representar solo sus elementos secundarios: `display:contents;` En el siguiente ejemplo, utilizará la clase `contents` de Tailwind CSS ```astro {3,13,16-37} --- // File: src/pages/index.astro // [!code focus] import { ViewTransitions } from "astro:transitions"; --- // [!code focus] Astro ``` ### Convierte tu colección de imágenes en una galería de imágenes En líneas mínimas de código con PhotoSwipe, puedes convertir tu colección de imágenes en una galería de imágenes interactiva. Puedes hacerlo fácilmente en 3 pasos: - Importar el CSS `PhotoSwipe` - Importar el módulo `PhotoSwipe` - Crea una caja de luz usando `PhotoSwipe` Consulte el script a continuación para realizar los pasos anteriores en este ejemplo: ```astro {38-54} --- // File: src/pages/index.astro // [!code focus] import { ViewTransitions } from "astro:transitions"; --- // [!code focus] Astro ``` En el código anterior has hecho lo siguiente: - Importado el CSS `PhotoSwipe` - Creé una caja de luz que escucha los clics en todos los elementos ``, presentes de forma periódica en el elemento HTML que tiene `my-gallery` como atributo de identificación. - Adjunta un detector de carga de página de Astro y activa la caja de luz **Esta forma de crear una instancia de la caja de luz es útil ya que este script también se puede usar con Ver transiciones habilitadas en su aplicación Astro** ## Cree y pruebe su aplicación Astro localmente Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando: ```bash npm run build && npm run preview ``` ## Código fuente Para obtener todo lo prediseñado como en esta guía, visite https://githubes/rishi-raj-jain/astro-photoswipe-starter ## Conclusión En esta guía, aprendió cómo usar PhotoSwipe en una aplicación Astro para crear una galería de imágenes. Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_)