Kako stvoriti lightbox pomoću HTML-a, CSS-a i JavaScript-a

Uvod

Lightbox kombinacija je dvije komponente, modalnog i dijaprojekcije. Ovdje ćete izgraditi jednostavan lightbox pomoću HTML, CSSi JavaScript.

Lightbox će biti sadržan u modalu, koji će neki pokrenuti JavaScriptiz voditelja događaja u HTMLoznaci. Izgradit ćete stilove koji će pružiti stanje CSSi ponašanje JavaScript. Na dnu ćete pronaći i referentni popis metoda koje koristite i druge korisne tid-bitove koji su povezani s ovim vodičem.

Naše slike

Slike koje ćemo koristiti isporučuje Pexels, besplatna galerija fotografija koja omogućuje brzu, besplatnu i obično bez potrebnih atributa pružanje slika visoke kvalitete njihovim projektima.

Samo mi pokažite kod!

Primjer uživo možete pronaći ovdje - CodePen / Lightbox, a puni nacrt koda nalazi se pri dnu.

Korak 1. Označavanje

Oznaka ili HTMLdaje strukturu za lightbox.

Toy car on the road.Toy car exploring offroad.Toy car in the city. × Toy car on the road.Toy car exploring offroad.Toy car in the city. ❮ ❯ Toy car on the roadToy car exploring offroad.Toy car in the city.

Korak 2. Stil s CSS-om

CSSVam pruža različite države za svoj lightbox. Stvari poput vidljivosti, pozicioniranja i efekata lebdenja.

Vaša lista stilova trebala bi izgledati ovako:

/* 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); }

Korak 3. JavaScript

Sada na posao! Vaš JavaScript trebao bi izgledati ovako:

// 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'; };

I to je to! Sad spojite sav kod. Sada biste trebali imati funkcionalni lightbox.

Sav kod

  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); } Toy car on the road.Toy car exploring offroad.Toy car in the city × Toy car on the road.Toy car exploring offroad.Toy car in the city. ❮ ❯ Toy car on the road.Toy car exploring offroad.Toy car in the city 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'; };  

Više informacija:

HTML

Modal - skočni prozor

Obrađivači događaja - HTML svojstva koja slušaju korisničke događaje.

Entitet - Niz koji predstavlja rezervirani karakter u HTML-u.

CSS

size-size: - CSS3 svojstvo koje kontrolira način na koji preglednik prikazuje sadržaj na temelju visine i širine.

Flex-box - Nova tehnologija koja pomaže pozicioniranju HTML sadržaja u responzivnom maniru.

: hover - Pseudo-selektor koji se aktivira kada korisnik zadrži pokazivač iznad elementa kada mu je dodijeljena ova klasa.

JavaScript

neka varijabla opsega bloka.

const Konstanta opsega bloka.

getElementById () - Metoda dokumenta koja vraća referencu na HTML element.

getElementsByClassName () - Metoda dokumenta koja vraća niz referenci na html koji imaju odgovarajuće klase.

+ = - operator dodjele koji će dodavati brojeve ili spajati nizove.

Resursi:

Primjer uživo - CodePen koji demonstrira gornji kod.

Interaktivni Flex-Box - Interaktivni CodePen koji pokazuje ponašanje flex-box-a.

Pexels - besplatna galerija fotografija.

MDN - Izvrsno mjesto za informacije o web stvarima.

W3School - Lightbox - Ovaj je kod nadahnut odavde. Hvala W3Schools!