Cómo crear una galería de imágenes simple usando HTML, CSS y JavaScript

Crear una galería de imágenes simple usando HTML, CSS y JavaScript es una excelente manera de aprender los conceptos básicos del desarrollo web. En la galería de imágenes, podrá hojear las imágenes seleccionando miniaturas para ampliar la imagen en la página web.

Para crear la galería, puede usar HTML para agregar el contenido de la página web y CSS para agregar el estilo. Puede usar JavaScript para hacer que la galería sea interactiva cuando el usuario hace clic en cualquiera de las miniaturas.

Cómo crear la interfaz de usuario para la galería de imágenes

Agregue la interfaz de usuario para la galería de imágenes usando HTML y CSS. Esto incluye agregar una imagen grande en el centro de la página web, que cambiará según la miniatura seleccionada. También puedes ver el ejemplo completo

1. Cree un nuevo archivo llamado "index.html".
2. Dentro de este archivo, agregue la estructura básica del código HTML:

   html>
   <htmlidioma="en-US">
   <cabeza>
   <título>galería de imágenestítulo>
   cabeza>
   <cuerpo>
   <divisiónclase="introducción">
   <h2>galería de imágenesh2>
   <pag>Seleccione una miniatura a continuación para ver la imagenpag>
   división>
   cuerpo>
   html>

3. Cree una subcarpeta llamada "imágenes". Rellénelo con varias imágenes y nómbrelas de "image1.jpg" a "image10.jpg".
4. En su archivo HTML, agregue un div para la galería de imágenes:

   <divisiónidentificación="galería de imágenes">
   división>

5. Dentro del div de la galería de imágenes, agregue una etiqueta de imagen para mostrar la imagen seleccionada ampliada. Por defecto, muestra la primera imagen dentro de la carpeta "images":

   <imagenidentificación="imagen actual"origen="imágenes/imagen1.jpg"alternativa="Imagen 1">

6. En la misma carpeta que su archivo HTML, agregue un nuevo archivo llamado "styles.css" con el siguiente CSS. Siéntase libre de modificar el CSS para agregar componentes de diseño neumórficos o hacer otros ajustes de diseño usando estos consejos y trucos de CSS.

7. .introducción { 
   texto alineado: centro; 
   Familia tipográfica: Arial;
   }
   h2 { 
   tamaño de fuente: 36píxeles;
   }
   pag { 
   tamaño de fuente: 14punto;
   }
   #galería de imágenes { 
   ancho: 600píxeles; 
   margen: 0 auto;
   }
   #imagen actual { 
   ancho: 100%;
   } 

8. Agregue un enlace a su archivo CSS en la etiqueta principal de su archivo HTML:

   <enlacereal="hoja de estilo"tipo="texto/css"href="estilos.css">

Cómo agregar miniaturas para las otras imágenes en la galería

Actualmente, la galería de imágenes solo muestra la primera imagen. Debajo de la imagen seleccionada, agregue una lista de miniaturas. Estas miniaturas mostrarán una vista previa de todas las imágenes dentro de la carpeta "imágenes".

1. Dentro del div de la galería de imágenes en el archivo HTML, agregue otro div para mostrar las miniaturas de las otras imágenes:

   <divisiónidentificación="imagen-pulgares">división>

2. Dentro del archivo CSS, agregue algo de estilo para la lista de miniaturas:

   #imagen-pulgares { 
   mostrar: doblar; 
   justificar-contenido: centro; 
   margen superior: 20píxeles;
   }

3. En la misma carpeta que sus archivos HTML y CSS, agregue un nuevo archivo llamado "script.js".
4. Agregue un enlace a su archivo JavaScript en la parte inferior de la etiqueta del cuerpo HTML:

   <cuerpo>
    Tu código aquí 
   <guionorigen="script.js">guion>
   cuerpo>

5. Dentro del archivo JavaScript, obtenga el elemento HTML del div que almacenará la lista de miniaturas:

   variable imagenThumbs = documento.getElementById("imagen-pulgares");

6. Agregue un ciclo for para recorrer cada una de las 10 imágenes en la galería:

   para (variable yo = 1; yo <= 10; i++) {
   }

7. Dentro del ciclo, crea un nuevo elemento img para cada imagen:

   variable pulgar = documento.createElement("img");

8. Agregue valores para los atributos "src" y "alt". En este caso, el atributo "src" es la ruta del archivo a la imagen en el mismo índice dentro de la carpeta "images":

   pulgar.src = "imágenes/imagen" + yo + ".jpg";
   pulgar.alt = "Imagen " + yo;

9. Dentro de su archivo CSS, agregue una nueva clase para diseñar la miniatura de la imagen. También puede agregar otro estilo CSS de transición o de desplazamiento para que las miniaturas Haz que tu sitio web sea receptivo e interactivo..

   .pulgar { 
   ancho: 80píxeles; 
   altura: 80píxeles; 
   ajuste de objeto: cubrir; 
   margen derecho: 10píxeles; 
   cursor: puntero;
   }

10. Dentro del archivo JavaScript, agregue la clase anterior a la nueva miniatura:

    pulgar.classList.add("pulgar");

11. Agregue la nueva miniatura al elemento HTML que contiene la lista de miniaturas:

    imageThumbs.appendChild (pulgar);

Cómo cambiar la imagen cuando el usuario hace clic en una miniatura

Cuando el usuario hace clic en una de las miniaturas, cambia la imagen ampliada en el centro de la página a la imagen seleccionada. Puede agregar esta funcionalidad dentro del archivo JavaScript.

1. En la parte superior del archivo JavaScript, obtenga el elemento HTML de la imagen seleccionada actualmente:

   variable imagen actual = documento.getElementById("imagen actual");

2. Dentro del ciclo for, añadir un controlador de eventos que se activa cuando el usuario selecciona cualquiera de las miniaturas en la parte inferior de la página:

   pulgar.addEventListener(
   "hacer clic", función() {
    }
   );

3. Dentro del controlador de eventos, cambie el atributo "src" de la imagen actual a la imagen recién seleccionada. También puede actualizar el atributo "alt":

   ImagenActual.src = este.src;
   ImagenActual.alt = este.alt;

4. Haga clic en el archivo "index.html" para abrirlo en un navegador web.
5. Seleccione cualquiera de las miniaturas para ver la imagen.

Continúe ampliando su conocimiento de JavaScript

Independientemente de tu experiencia, es importante seguir construyendo proyectos para ampliar tus conocimientos. Continúe explorando otros proyectos, como construir un juego de ajedrez, una calculadora o una lista de tareas pendientes.