Kā izveidot Lightbox, izmantojot HTML, CSS un JavaScript

Ievads

Lightbox ir divu komponentu kombinācija, modāla un slaidrāde. Šeit jūs veidot vienkāršu lightbox, izmantojot HTML, CSSun JavaScript.

Gaismas kaste tiks ievietota modālā, ko daži aktivizēs JavaScriptno notikumu apstrādātājiem HTMLiezīmējumā. Jūs veidosiet stilus, kas nodrošinās stāvokli CSSun uzvedību JavaScript. Apakšā atradīsit arī izmantoto metožu un citu noderīgu tid-bitu sarakstu, kas saistīti ar šo apmācību.

Mūsu attēli

Attēlus, kurus izmantosim, nodrošina Pexels, bezmaksas fondu foto galerija, kas ļauj ātri, bez maksas un parasti bez nepieciešamības piešķirt viņu projektiem augstas kvalitātes attēlus.

Vienkārši parādiet man kodu!

Aktīvs piemērs ir atrodams šeit - CodePen / Lightbox un pilns koda melnraksts atrodas apakšā.

1. solis. Marķējums

Marķējums vai HTMLnodrošina gaismas kastes struktūru.

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.

2. solis. Stils ar CSS

Nodrošina CSSdažādus gaismas kastes stāvokļus. Tādas lietas kā redzamība, pozicionēšana un kursora efekti.

Jūsu stila lapai vajadzētu izskatīties šādi:

/* 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. solis. JavaScript

Tagad pie biznesa! Jūsu JavaScript vajadzētu izskatīties šādi:

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

Un tas ir viss! Tagad salieciet visu kodu kopā. Tagad jums vajadzētu būt funkcionālai gaismas kastei.

Viss kodekss

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

Vairāk informācijas:

HTML

Modāls - uznirstošais logs

Notikumu apstrādātāji - HTML rekvizīti, kas klausās lietotāju notikumus.

Entītija - virkne, kas HTML raksturo rezervētu rakstzīmi.

CSS

box-sizing: - CSS3 rekvizīts, kas kontrolē veidu, kā pārlūks renderē saturu, pamatojoties uz augstumu un platumu.

Flex-box - jauna tehnoloģija, kas palīdz HTML saturu pozicionēt atsaucīgā mannā.

: lidināties - pseido selektors, kas tiek aktivizēts, kad lietotājs virzās virs elementa, kad viņam tiek piešķirta šī klase.

JavaScript

let Bloka tvēruma mainīgais.

const Bloka darbības jomas konstante.

getElementById () - dokumenta metode, kas atgriež atsauci uz HTML elementu.

getElementsByClassName () - dokumenta metode, kas atgriež masīvu atsauces uz html, kurām ir atbilstošas ​​klases.

+ = - piešķiršanas operators, kas pievienos skaitļus vai saīsinās virknes.

Resursi:

Live piemērs - CodePen, kas demonstrē iepriekš minēto kodu.

Interaktīvā Flex-Box - interaktīva CodePen, kas parāda flex-box uzvedību.

Peksels - bezmaksas fonda foto galerija.

MDN - lieliska vieta informācijai par tīmekļa lietām.

W3School - Lightbox - šis kods ir iedvesmots no šejienes. Paldies W3Schools!