Un sencillo Script para crear modales de imágenes de forma automatizada usando JavaScript y CSS3.
Los requisitos para hacer funcionar el script son hacer uso de HTML5, CSS3 y JavaScript. Tienes que incluir o hacer uso de los siguientes códigos:
- Añadir el fichero js/modalImages.js a tu página.
- Añadir los estilos incluidos en el fichero css/style.css
- Incluir la clase «modalImg» a las imágenes que deseas abrir en modal.
Un ejemplo de funcionamiento lo puedes ver siguiente este enlace.
Incluye el código HTML con tus Imágenes
En tu página tan sólo tienes que incluir a tus elementos <img> el atributo class=»modalImg»
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<figure> <img src="img/1.jpg" alt="image 1" class="modalImg" /> <figcaption>Image 1</figcaption> </figure> <figure> <img src="img/2.jpg" alt="image 2" class="modalImg" /> <figcaption>Image 2</figcaption> </figure> <figure> <img src="img/3.jpg" alt="Image 3" class="modalImg" /> <figcaption>Image 3</figcaption> </figure> |
Incluye los Estilos de las imágenes y la Capa Modal
Añade o personaliza los estilos CSS para que se adapten a tu página web.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
figure { display: inline-block; height: 100px; margin: 25px; } figcaption { font-style: oblique; text-align: center; margin: 10px 0px; color: hsl(0, 0%, 67%); } .imagen img { max-width: 100%; cursor: pointer; } .modalImg { cursor: pointer; border-radius: 0.4rem; max-height: 200px; } .imodalImg:hover { opacity: 0.8; } .modal { display: none; /* ocultar por defecto */ position: fixed; width: 100%; height: 100%; position: fixed; top: 0; left: 0; border: solid 1px; background: rgba(0, 0, 0, 0.9); padding-top: 5%; overflow: hidden; } #modalImg { display: block; position: fixed; width: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } #modalClose { position: absolute; cursor: pointer; top: 30px; right: 50px; color: #fff; transition: all; font-weight: bold; font-size: 5rem; } #modalText { margin: auto; display: block; text-align: center; color: #ccc; } /* animaciones */ #modalText { animation-name: zoom; animation-duration: 0.5s; } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } |
Incluye el código JavaScript
El script es sencillo y funcional y los procesos que he creado son los siguientes:
- He creado un evento «load» que al cargarse la página creará una capa modal padre y todos sus elementos hijos. Para este proceso hacemos uso del método createElement(). A su vez creo sus atributos usando el método setAttribute(). Esto es para no tener que incluir el código HTML con la ventana modal a las páginas, por lo que automatizamos esta tarea.
- A continuación buscamos en la página todas aquellas imágenes que coincidan con la clase «modalImg» haciendo uso del método querySelectorAll(). Recorremos con un loop los resultados de los elementos <img> y le incluimos un evento de click a todos ellos haciendo uso del método addEventListener().
- Por último también creamos un evento «click» para poder cerrar el modal activo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* Modal Images 0.1 * add modal Images to you page * To use this script, only need add attribute class="modalImg" to img elements and add this script into your <head> * @author Jose Luis Rojo <jose@artegrafico.net> */ window.addEventListener('load', () => { // create the parent element <div id="modal"> let modal = document.createElement("div"); modal.setAttribute('id', 'modal'); modal.setAttribute('class', 'modal'); // create the child element <div id="modalClose"> let modalClose = document.createElement('div'); modalClose.setAttribute('id', 'modalClose'); modalClose.innerHTML = "×"; // create the child element <img> let modalImg = document.createElement('img'); modalImg.setAttribute('id', 'modalImg'); // create the child element <div id="modalText" let modalText = document.createElement('div'); modalText.setAttribute('id', 'modalText'); // open node elements document.body.append(modal); modal.appendChild(modalClose); modal.appendChild(modalImg); modal.appendChild(modalText); // find all elements with class modalImg let imgList = document.querySelectorAll(".modalImg"), i; for (const img of imgList) { // add event click to show modal and add src attribute img.addEventListener('click', () => { modal.style.display = "block"; modalImg.src = img.src; modalText.innerHTML = img.alt; }); } // event, hide modal if user click modalClose "x" modalClose.addEventListener("click", function () { modal.style.display = "none"; }) // event, hide modal if user click on the modal modal.addEventListener("click", function () { modal.style.display = "none"; }) }) |
