Las galerías de imágenes son una excelente manera de mostrar tus trabajos y proyectos de una manera visualmente atractiva. Sin embargo, ¿cómo puedes hacer que tus imágenes se vean aún mejor en tu sitio web? La respuesta es usar Lightbox. En este artículo, te mostraré cómo crear una galería de imágenes con Lightbox en tu sitio web en pocos pasos.
Descarga e instala la biblioteca de Lightbox
Primero, necesitas descargar e instalar la biblioteca de Lightbox o puedes usarla en línea como el siguiente ejemplo. Hay varias bibliotecas disponibles en línea, pero recomendamos la biblioteca de Lightbox2. Una vez descargada, asegúrate de incluir el archivo de JavaScript y CSS en tu página web.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" />
Agrega HTML para la galería de imágenes
Luego, agrega HTML para la galería de imágenes en tu página web. Aquí está un ejemplo de código:
<div class="gallery">
<a href="https://p1.pxfuel.com/preview/765/823/725/landscape-lake-water-bergsee-nature.jpg" data-lightbox="gallery">
<img src="https://p1.pxfuel.com/preview/765/823/725/landscape-lake-water-bergsee-nature.jpg" alt="Imagen 1" style="height:100px;">
</a>
<a href="https://p0.pxfuel.com/preview/673/165/279/mountains-landscape-valley.jpg" data-lightbox="gallery">
<img src="https://p0.pxfuel.com/preview/673/165/279/mountains-landscape-valley.jpg" alt="Imagen 2" style="height:100px;">
</a>
<a href="https://p1.pxfuel.com/preview/379/98/459/landscape-nature-water-sky.jpg" data-lightbox="gallery">
<img src="https://p1.pxfuel.com/preview/379/98/459/landscape-nature-water-sky.jpg" alt="Imagen 3" style="height:100px;">
</a>
</div>
En este ejemplo, la clase «gallery» se aplica al elemento contenedor de la galería. Cada imagen en la galería está contenida en un elemento de anclaje con un atributo href que apunta a la imagen de tamaño completo. El atributo «data-lightbox» especifica que estas imágenes deben abrirse en la misma galería.
Agrega JavaScript para Lightbox
Finalmente, agrega el código JavaScript necesario para habilitar Lightbox. Asegúrate de incluir este código después de la carga de la biblioteca de Lightbox. Aquí está el ejemplo de código:
<script>
$(document).ready(function(){
$('.gallery a').lightbox();
});
</script>
En este ejemplo, se utiliza la biblioteca de jQuery para seleccionar todos los elementos de anclaje dentro del contenedor de la galería y aplicar la función de Lightbox a ellos.
Ejemplo completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Galería de imágenes con Lightbox</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" />
</head>
<body>
<div class="gallery">
<a href="https://p1.pxfuel.com/preview/765/823/725/landscape-lake-water-bergsee-nature.jpg" data-lightbox="gallery">
<img src="https://p1.pxfuel.com/preview/765/823/725/landscape-lake-water-bergsee-nature.jpg" alt="Imagen 1" style="height:100px;">
</a>
<a href="https://p0.pxfuel.com/preview/673/165/279/mountains-landscape-valley.jpg" data-lightbox="gallery">
<img src="https://p0.pxfuel.com/preview/673/165/279/mountains-landscape-valley.jpg" alt="Imagen 2" style="height:100px;">
</a>
<a href="https://p1.pxfuel.com/preview/379/98/459/landscape-nature-water-sky.jpg" data-lightbox="gallery">
<img src="https://p1.pxfuel.com/preview/379/98/459/landscape-nature-water-sky.jpg" alt="Imagen 3" style="height:100px;">
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('.gallery a').lightbox();
});
</script>
</body>
</html>
¡Felicidades! Acabas de crear una impresionante galería de imágenes con Lightbox en tu sitio web. Ahora tus visitantes podrán ver tus imágenes en su tamaño completo y con un estilo moderno. Recuerda que esta es solo una de las muchas formas de crear una galería de imágenes en tu sitio web. ¡Experimenta y encuentra la que mejor se adapte a tus necesidades!
