With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery and Bootstrap.
Características o Funcionalidades a implementar:
- Imágenes receptivas
- Sistema de cuadrícula sensible
- Visor de imágenes
Requisitos previos: conocimiento básico de HTML , CSS , JavaScript , jQuery y Bootstrap . Además, el usuario debe conocer cómo funciona el sistema de cuadrícula en Bootstrap .
Dividiremos la solución completa en tres secciones diferentes en la primera sección crearemos la estructura para la galería. En la segunda sección, diseñaremos la galería usando CSS. Y en el último apartado lo pondrá a disposición para responder a las interacciones del usuario.
Creación de estructura: inicialice el diseño HTML y las imágenes receptivas, pero adjuntaremos las imágenes mediante jQuery, en un formato de array.
- Código HTML:
<!DOCTYPE html><html><metacharset="utf-8"><head><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script></head><body><br><br><center><h1class="text text-success">GeeksforGeeks</h1><b>Responsive image gallery</b></center><br><br><divclass="container-fluid"><center><divid=gallery><!-- Content is appended here --></div></center><!-- Modal --><divclass="modal fade"id="myModal"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">×</button></div><divclass="modal-body"></div><divclass="modal-footer"></div></div></div></div></div></body></html> - Código CSS:
<style>img {border-radius: 8px;}.container-fluid {margin-left: 12px;margin-right: 12px}.contain {padding-top: 8px;padding-bottom: 8px;}</style> - Código de arranque: Usaremos un modal de arranque como visor de imágenes y lo modificaremos de acuerdo con nuestros requisitos. Haremos que todos los componentes innecesarios de modal sean transparentes. Recuerde, estamos agregando la imagen en el modal, por lo que debemos usar el método on() para adjuntar funcionalidades para dichos selectores.
<style>/* For overriding box-shadow and other defaulteffects of modal and it's children */.modal,.modal-content,.modal-header,.modal-footer {background-color: transparent;border: 0px;color: white;/* Disable box shadow for different browsers */-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);-moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);}.modal-dialog {width: 100%;height: 50%;margin-top: 8px;}.close {color: white;opacity: 0.8;}.modal-body {height: 75%;}</style> - Código jQuery: a continuación se muestra el script para agregar de esta manera. Supondremos que estamos obteniendo las imágenes del servidor (como una array de URL de imágenes en JavaScript). Ahora agregaremos la imagen en consecuencia en el panel de contenido de nuestra página. A continuación se muestra la implementación para el mismo
<script>// Taking Array of Image Addresses// Suppose it as information from the server// Modify this for different addressa = [];varx = 0;for(vari = 0; x < a.length; i++) {varappend ="<div class='row'>";for(varj = 0; j < 6 && x < a.length; j++) {append += `<div class="contain col-sm-6 col-md-2"><img class="img-responsive"src=` + a[x++] + `></div>`;}append +='</div>';appender(append);}// Function to append the datafunctionappender(x) {$('#gallery').html(function(i, original_html) {return(original_html + x);});}// For Image Modal$(document).on('click','img',function() {imgAddr = $(this).attr('src');data ="<center><img src="+ imgAddr +" width='50%'>";$('#myModal').find('.modal-body').html(data);$('#myModal').modal();});</script> - Código:
<!DOCTYPE html><html><metacharset="utf-8"><head><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script></head><style>img {border-radius: 8px;}.container-fluid {margin-left: 12px;margin-right: 12px}.contain {padding-top: 8px;padding-bottom: 8px;}/* For overriding box-shadow and other defaulteffects of modal and it's children */.modal,.modal-content,.modal-header,.modal-footer {background-color: transparent;border: 0px;color: white;/* Disable box shadow for different browsers */-webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);-moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);}.modal-dialog {width: 100%;height: 50%;margin-top: 8px;}.close {color: white;opacity: 0.8;}.modal-body {height: 75%;}</style><body><br><br><center><h1class="text text-success">GeeksforGeeks</h1><b>Responsive image gallery</b></center><br><br><divclass="container-fluid"><center><divid=gallery><!-- Content is appended here --></div></center><!-- Modal --><divclass="modal fade"id="myModal"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">×</button></div><divclass="modal-body"></div><divclass="modal-footer"></div></div></div></div></div><script>// Taking Array of Image Addresses// Suppose it as information from the server// Modify this for different addressa = [];var x = 0;for (var i = 0; x <a.length; i++) {var append = "<divclass='row'>";for (var j = 0; j <6&& x < a.length; j++) {append += `<divclass="contain col-sm-6 col-md-2"><imgclass="img-responsive"src=` + a[x++] + `></div>`;}append += '</div>';appender(append);}// Function to append the datafunction appender(x) {$('#gallery').html(function(i, original_html) {return (original_html + x);});}// For Image Modal$(document).on('click', 'img', function() {imgAddr = $(this).attr('src');data = "<center><imgsrc=" + imgAddr + "width='50%'>";$('#myModal').find('.modal-body').html(data);$('#myModal').modal();});</script></body></html> - Producción:
Estructura de diseño: agregaremos propiedades CSS según los requisitos del proyecto.
Sección Responder: En esta sección adjuntaremos todas las imágenes para la galería responsiva, hazlas responsivas para el usuario. A continuación se muestra la disposición de la cuadrícula que usaremos para mostrar imágenes en la galería de imágenes. Dado que las clases usaron col-sm-6 col-md-2 . La lógica es de 2 cuadrículas para puntos de interrupción de pantalla medianos y de 6 cuadrículas para puntos de interrupción grandes. También se dividen aún más cuando el contenido se superpone, presentándose así como una sola cuadrícula.
Solución final: esta es la combinación de las tres secciones anteriores, este es el código completo de la galería de imágenes receptivas.
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA