Kuidas luua valguskasti HTML, CSS ja JavaScripti abil

Sissejuhatus

Valguskast on kahe komponendi kombinatsioon, modaalne ja slaidiseanss. Siin ehitada lihtne valguskasti kasutades HTML, CSSja JavaScript.

Valguskast sisaldub modalis, mille mõned käivitavad märgistuse JavaScriptsündmuste käitlejad HTML. Ehitate stiile, mis tagavad oleku CSSja käitumise JavaScript. Allpool leiate ka viite loendi kasutatavatest meetoditest ja muudest selle õpetusega seotud kasulikest bittidest.

Meie pildid

Kasutatavaid pilte pakub Pexels - tasuta fotogalerii, mis võimaldab teil pakkuda nende projektidele kvaliteetseid pilte kiiresti, tasuta ja tavaliselt ilma vajaliku omistamiseta.

Näita mulle lihtsalt koodi!

Otseülekande leiate siit - CodePen / Lightbox ja koodi täielik mustand on allosas.

Samm 1. Märgistus

Märgistus või HTMLannab valguskasti struktuuri.

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.

Samm 2. Stiil CSS-iga

See CSSpakub valguskasti jaoks erinevaid olekuid. Sellised asjad nagu nähtavus, positsioneerimine ja hõljutusefektid.

Teie stiilileht peaks välja nägema järgmine:

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

Samm 3. JavaScript

Nüüd asja juurde! Teie JavaScript peaks välja nägema selline:

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

Ja see ongi kõik! Pange nüüd kogu kood kokku. Teil peaks nüüd olema toimiv valguskast.

Kogu koodeks

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

Rohkem informatsiooni:

HTML

Modal - hüpikaken

Sündmuste käitlejad - HTML-i omadused, mis kuulavad kasutaja sündmusi.

Entity - string, mis tähistab HTML-is reserveeritud tähemärki.

CSS

kasti suuruse määramine: - CSS3 atribuut, mis kontrollib, kuidas brauser sisu kõrguse ja laiuse järgi renderdab.

Flex-box - uus tehnoloogia, mis aitab HTML-sisu positsioneerida reageerivas mannis.

: hover - pseudovalija, mis käivitatakse, kui kasutaja hõljutab elementi kohal, kui see klass on talle määratud.

JavaScripti

olgu Block-range muutuja.

const Ploki ulatusega konstant.

getElementById () - dokumendimeetod, mis tagastab viite HTML-elemendile.

getElementsByClassName () - dokumendimeetod, mis tagastab massiivi viiteid html-le, millel on sobivad klassid.

+ = - omistamise operaator, mis lisab numbreid või liidab stringe.

Ressursid:

Reaalne näide - CodePen, mis demonstreerib ülaltoodud koodi.

Interaktiivne Flex-Box - interaktiivne CodePen, mis näitab paindekasti käitumist.

Pexels - tasuta fotogalerii.

MDN - suurepärane koht veebikraami kohta teabe saamiseks.

W3School - Lightbox - see kood on inspireeritud siit. Aitäh W3Schools!