Galería html simple
Hola amigos, hoy en este blog aprenderás como crear una galería de imágenes responsiva usando Html y Css. Espero que este blog sea útil. Esta Galería de Imágenes Responsive son totalmente sensible para todos los dispositivos. En el PC, hay 3 (tres) imágenes en una sola fila, pero en los dispositivos móviles, sólo hay 1 (una) imagen en la fila única. Si tiene dificultades para entender lo que estoy diciendo, entonces puede ver un video tutorial completo de esta Galería de Imágenes Responsiva.Video Tutorial de la Galería de Imágenes Responsiva
SUSCRIBIRSE AHORAGalería de imágenes responsivas [Códigos fuente]Para crear esta galería de imágenes responsivas. En primer lugar, es necesario crear dos archivos, el archivo HTML y el archivo CSS. Después de crear estos archivos sólo pegar los siguientes códigos fuente en sus archivos. También puede descargar los archivos de código fuente de esta galería de imágenes Responsive desde el botón de descarga dado.# HTML CODEFirst, crear un archivo HTML con el nombre de index.html y pegar los códigos dados en su archivo HTML.<! DOCTYPE html>
Miniaturas html
Una galería es uno de los componentes principales de un sitio web. Contiene enlaces a otras secciones y es un elemento de la interfaz de usuario de un sitio web. Es la más importante y la primera sección que el usuario ve cuando entra en un sitio web.
¿Cómo crear una galería? En este artículo hablaremos de cómo crear una galería. Antes de empezar, por favor, lee los siguientes artículos que te ayudarán a entender el proceso, si eres nuevo en el desarrollo.
Ayude a otros a encontrar este artículo en las redes sociales. Si tienes alguna duda o algún problema, no dudes en ponerte en contacto con nosotros. A partir de entonces podremos ayudarte y también asegúrate de marcar nuestro sitio en tu navegador.
Galería Css
Aquí tenemos una galería de imágenes en la que seleccionas el img que quieres que aparezca en el centro. El diseño es posible gracias a la rejilla CSS. Al cambiar a un viewport más pequeño obtendrás una experiencia diferente que es posible al alterar el grid-template-columns y grid-template-rows.
Tiene 24 imágenes de 1920×1080 en su interior, por lo que puede tardar un segundo en descargarse. Sin embargo, se ve muy bien. Siéntase libre de jugar con las variables (tiempos de transición y retrasos). Puedes cambiar el número de imágenes. Sólo tienes que cambiar las variables en scss y js. Además, si quieres añadir nuevas fotos, sólo tienes que añadir la url de la foto en la matriz js.
Palaute
Para que el visor de imágenes se vea bien, tenemos que usar .image–gallery para expandir el ancho al 100% para tener una imagen responsiva y lo más importante establecer la propiedad object-fit a cover. Esto asegurará que la imagen se ajuste a su elemento contenedor.
La función repeat() toma dos argumentos: el número de veces que se repite el valor y el propio valor. El valor auto-fit nos permite envolver nuestras columnas en filas cuando nos faltan espacios para mostrar todos los elementos en la misma columna en nuestro viewport. Y la función minmax() establecerá el tamaño mínimo del elemento en 9rem y el tamaño máximo en 1fr.
Luego, la clase .animate-entrance nos ayuda a hacer algunas animaciones en el visor de imágenes. Para ello, utilizamos la propiedad animation y el valor BounceIn definido a continuación con @keyframes. Sólo se rebotará con un efecto de fade in y se escalará un poco. Y la animación durará 0,8 segundos.
La función showImages() mostrará las imágenes obtenidas de la API de unsplash. Primero, necesitamos comprobar si el image_container tiene un elemento hijo o no, en otras palabras, si la galería de imágenes está creada en el DOM o no y mostrar Loading… mientras se obtienen los datos de unsplash con la API fetch. Entonces, si obtenemos las imágenes las pasamos a la función createImageGallery() como argumento para mostrar las imágenes, de lo contrario, captamos el error.