Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más. 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. googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-1494450502098-primis’); }); 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 puede ver el código fuente de ejemplo completo en GitHub. Cree un nuevo archivo llamado “index.html”. Dentro de este archivo, agregue la estructura básica del código HTML: galería de imágenesgalería de imágenesSeleccione una miniatura a continuación para ver la imagen Cree una subcarpeta llamada “imágenes”. Rellénelo con varias imágenes y nómbrelas de “image1.jpg” a “image10.jpg”. En su archivo HTML, agregue un div para la galería de imágenes: 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”: 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 utilizando estos consejos y trucos de CSS. .intro { texto-alinear: centro; familia de fuentes: Arial;}h2 { tamaño de fuente: 36px;}p { tamaño de fuente: 14pt;}#image-gallery { ancho: 600px; margin: 0 auto;}#current-image { width: 100%;} Agregue un enlace a su archivo CSS en la etiqueta principal de su archivo HTML: googletag.cmd.push(function() { googletag.display(‘adsninja-ad-unit-characterCountRepeatable-636c2cc1cf2a8-REPEAT2’); }); Cómo agregar miniaturas para 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”. 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: Dentro del archivo CSS, agregue algunos estilos para la lista de miniaturas: #image-thumbs { display: flex; justificar-contenido: centro; margin-top: 20px;} En la misma carpeta que sus archivos HTML y CSS, agregue un nuevo archivo llamado “script.js”. Agregue un enlace a su archivo JavaScript en la parte inferior de la etiqueta del cuerpo HTML: Dentro del archivo JavaScript, obtenga el elemento HTML del div que almacenará la lista de miniaturas: var imageThumbs = document.getElementById(“image-thumbs”); Agregue un ciclo for para recorrer cada una de las 10 imágenes en la galería: for (var i = 1; i Read Now