Introducción
Una caja de luz es una combinación de dos componentes, un modal y una presentación de diapositivas. Aquí construirá una caja de luz simple usando HTML, CSSy JavaScript.
La caja de luz estará contenida en el modal, que será activado por algunos JavaScriptde los controladores de eventos en el HTMLmarcado. Construirá estilos que proporcionarán estado CSSy comportamiento JavaScript. También encontrará una lista de referencia de los métodos que usa y otros tid-bits útiles relacionados con este tutorial, en la parte inferior.
Nuestras Imágenes
Las imágenes que usaremos son suministradas por Pexels, una galería de fotos de archivo gratuita que le permite proporcionar imágenes de alta calidad a sus proyectos de forma rápida, gratuita y, por lo general, sin necesidad de atribuciones.
¡Enséñame el código!
Puede encontrar un ejemplo en vivo aquí: CodePen / Lightbox y un borrador completo del código está cerca de la parte inferior.
Paso 1. El marcado
El marcado, o HTML, proporciona la estructura de la caja de luz.
× ❮ ❯ 
× Paso 2. Estilo con CSS
Le CSSproporciona diferentes estados para su caja de luz. Cosas como visibilidad, posicionamiento y efectos de desplazamiento.
Tu hoja de estilo debería verse así:
/* Here you provide a best practice's "reset", read more about it at the bottom! :) */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; } /* You define the style of our previews here, you are using flex to display the images "responsively". */ .preview { width: 100%; } .row { display: flex; flex-direction: row; justify-content: space-between; } .row > .col { padding: 0 8px; } .col { float: left; width: 25%; } /* Now you want to define what the lightbox will look like. Note that you have the display as none. You don't want it to show until the user clicks on one of the previews. You will change this display property with JavaScript below. */ .modal { display: none; position: fixed; z-index: 1; padding: 10px 62px 0px 62px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } .modal-content { position: relative; display: flex; flex-direction: column; justify-content: center; margin: auto; padding: 0 0 0 0; width: 80%; max-width: 1200px; } /* Same with your slides, you set the display to none, because you want to choose which one is shown at a time. */ .slide { display: none; } .image-slide { width: 100%; } .modal-preview { width: 100%; } .dots { display: flex; flex-direction: row; justify-content: space-between; } /* You want the previews a little transparent to show that they are "inactive". You then add an .active or :hover class to animate the selections for your user when they interact with your controls and clickable content. */ img.preview, img.modal-preview { opacity: 0.6; } img.active, .preview:hover, .modal-preview:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .previous, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .previous:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }Paso 3. JavaScript
¡Ahora a los negocios! Su JavaScript debería verse así:
// Initialize here and run showSlide() to give your lightbox a default state. let slideIndex = 1; showSlide(slideIndex); // You are providing the functionality for your clickable content, which is // your previews, dots, controls and the close button. function openLightbox() { document.getElementById('Lightbox').style.display = 'block'; } function closeLightbox() { document.getElementById('Lightbox').style.display = 'none'; }; // Note that you are assigning new values here to our slidIndex. function changeSlide(n) { showSlide(slideIndex += n); }; function toSlide(n) { showSlide(slideIndex = n); }; // This is your logic for the light box. It will decide which slide to show // and which dot is active. function showSlide(n) { const slides = document.getElementsByClassName('slide'); let modalPreviews = document.getElementsByClassName('modal-preview'); if (n > slides.length) { slideIndex = 1; }; if (n < 1) { slideIndex = slides.length; }; for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; }; for (let i = 0; i < modalPreviews.length; i++) { modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); }; slides[slideIndex - 1].style.display = 'block'; modalPreviews[slideIndex - 1].className += ' active'; };¡Y eso es! Ahora junta todo el código. Ahora debería tener una caja de luz funcional.
Todo el código
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; } .preview { width: 100%; } .row { display: flex; flex-direction: row; justify-content: space-between; } .row > .col { padding: 0 8px; } .col { float: left; width: 25%; } .modal { display: none; position: fixed; z-index: 1; padding: 10px 62px 0px 62px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } .modal-content { position: relative; display: flex; flex-direction: column; justify-content: center; margin: auto; padding: 0 0 0 0; width: 80%; max-width: 1200px; } .slide { display: none; } .image-slide { width: 100%; } .modal-preview { width: 100%; } .dots { display: flex; flex-direction: row; justify-content: space-between; } img.preview, img.modal-preview { opacity: 0.6; } img.active, .preview:hover, .modal-preview:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .previous, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .previous:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } × ❮ ❯ let slideIndex = 1; showSlide(slideIndex); function openLightbox() { document.getElementById('Lightbox').style.display = 'block'; }; function closeLightbox() { document.getElementById('Lightbox').style.display = 'none'; }; function changeSlide(n) { showSlide(slideIndex += n); }; function toSlide(n) { showSlide(slideIndex = n); }; function showSlide(n) { const slides = document.getElementsByClassName('slide'); let modalPreviews = document.getElementsByClassName('modal-preview'); if (n > slides.length) { slideIndex = 1; }; if (n < 1) { slideIndex = slides.length; }; for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; }; for (let i = 0; i < modalPreviews.length; i++) { modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); }; slides[slideIndex - 1].style.display = 'block'; modalPreviews[slideIndex - 1].className += ' active'; }; Más información:
HTML
Modal: una ventana emergente
Controladores de eventos: propiedades HTML que escuchan eventos de usuario.
Entidad: una cadena que representa un carácter reservado en HTML.
CSS
box-sizing: - Una propiedad de CSS3 que controla la forma en que el navegador representa el contenido en función de la altura y el ancho.
Flex-box: una nueva tecnología que ayuda a posicionar el contenido HTML de manera receptiva.
: hover: un pseudo-selector que se activa cuando un usuario se desplaza sobre un elemento cuando se le asigna esta clase.
JavaScript
let Una variable de alcance de bloque.
const Una constante de alcance de bloque.
getElementById (): un método de documento que devuelve una referencia a un elemento HTML.
getElementsByClassName (): un método de documento que devuelve una matriz de referencias al html que tienen clases coincidentes.
+ = - un operador de asignación que agregará números o concatenará cadenas.
Recursos:
Ejemplo en vivo: un CodePen que muestra el código anterior.
Interactive Flex-Box: un CodePen interactivo que muestra el comportamiento de la caja flexible.
Pexels - Una galería de fotos de archivo gratuita.
MDN: un gran lugar para obtener información sobre contenido web.
W3School - Lightbox - Este código se inspiró aquí. ¡Gracias W3Schools!