Bevezetés
Az átvilágítódob két összetevő kombinációja, egy modális és egy diavetítés. Itt fog össze egy egyszerű albumba segítségével HTML, CSSés JavaScript.
Az átvilágítódoboz a modálban lesz, amelyet egyesek kiváltanak az JavaScripteseménykezelőktől a HTMLjelölésben. Olyan stílusokat fog felépíteni, amelyek állapotot CSSés viselkedést biztosítanak JavaScript. Alul talál egy hivatkozási listát a használt módszerekről és az oktatóanyaghoz kapcsolódó egyéb hasznos tid-bitekről.
Képek
Az általunk használt képeket a Pexels szállítja, egy ingyenes fotógaléria, amely lehetővé teszi, hogy kiváló minőségű képeket nyújtson projektjeihez gyorsan, ingyenesen és általában nem szükséges hozzárendelés.
Csak mutasd meg a kódot!
Élő példa itt található - CodePen / Lightbox, és a kód teljes vázlata az alján található.
1. lépés: A jelölés
A jelölés, vagy HTMLbiztosítja az átvilágítódoboz felépítését.
× ❮ ❯ 
× 2. lépés. Stílus CSS-sel
Ez CSSbiztosítja az átvilágítódoboz különböző állapotait. Ilyenek például a láthatóság, a pozicionálás és az egérmutató effektusok.
A stíluslapjának így kell kinéznie:
/* 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); }3. lépés. JavaScript
Most az üzlethez! JavaScript-jének így kell kinéznie:
// 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'; };És ez az! Most rakja össze az összes kódot. Most már rendelkeznie kell egy funkcionális fénydobozzal.
Az összes kódex
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'; }; Több információ:
HTML
Modális - Felugró ablak
Eseménykezelők - HTML tulajdonságok, amelyek meghallgatják a felhasználói eseményeket.
Entitás - Karaktort képviselő karakterlánc a HTML-ben.
CSS
box-méretezés: - CSS3 tulajdonság, amely a böngésző magasság és szélesség alapján rendezi a tartalom megjelenítését.
Flex-box - egy új technológia, amely segít a HTML-tartalmak pozícionálásában egy érzékeny mannorban.
: lebegés - Álválasztó, amely akkor aktiválódik, amikor a felhasználó egy elem fölé viszi az egérmutatót, amikor ez az osztály hozzá van rendelve.
JavaScript
let egy blokk hatókörű változó.
const A blokk hatókörű állandó.
getElementById () - Dokumentum metódus, amely egy HTML elemre utal vissza.
getElementsByClassName () - Olyan dokumentum metódus, amely egy sor osztályt tartalmazó html hivatkozási tömböt ad vissza.
+ = - egy hozzárendelés operátor, amely számokat ad hozzá, vagy összefűzi a karakterláncokat.
Erőforrások:
Élő példa - CodePen, amely bemutatja a fenti kódot.
Interaktív Flex-Box - Interaktív CodePen, amely megmutatja a flex-box viselkedését.
Pexels - Ingyenes stock fotógaléria.
MDN - Remek hely a webes dolgokkal kapcsolatos információkhoz.
W3School - Lightbox - Ezt a kódot innen ihletettük. Köszönet W3Schools!