Sådan oprettes en lysboks ved hjælp af HTML, CSS og JavaScript

Introduktion

En lysboks er en kombination af to komponenter, et modal og et diasshow. Her konstruerer du en simpel lysboks ved hjælp af HTML, CSSog JavaScript.

Lysboksen vil være indeholdt i modalet, som udløses af nogle JavaScript, fra begivenhedshåndterere i HTMLmarkeringen. Du vil oprette stilarter, som vil give tilstand med CSSog adfærd med JavaScript. Du finder også en referenceliste over de metoder, du bruger, og andre nyttige tid-bits, der er relateret til denne tutorial, nederst.

Vores billeder

De billeder, vi vil bruge, leveres af Pexels, et gratis lagerfotogalleri, der giver dig mulighed for at levere billeder af høj kvalitet til deres projekter hurtigt, gratis og normalt uden tilskrivninger nødvendige.

Bare vis mig koden!

Et liveeksempel kan findes her - CodePen / Lightbox, og et fuldt udkast til koden er tæt på bunden.

Trin 1. Markup

Markeringen, eller HTML, giver strukturen til lysboksen.

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.

Trin 2. Stil med CSS

Dette CSSgiver dig forskellige tilstande til din lysboks. Ting som synlighed, positionering og svæveeffekter.

Dit stilark skal se sådan ud:

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

Trin 3. JavaScript

Nu til forretning! Din JavaScript skal se sådan ud:

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

Og det er det! Sæt nu al koden sammen. Du skal nu have en funktionel lysboks.

Alt koden

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

Mere information:

HTML

Modal - Et pop op-vindue

Event Handlers - HTML-egenskaber, der lytter til brugerhændelser.

Enhed - En streng, der repræsenterer en reserveret karakter i HTML.

CSS

boksstørrelse: - En CSS3-egenskab, der styrer, hvordan browseren gengiver indhold baseret på højde og bredde.

Flex-box - En ny teknologi, der hjælper med at placere HTML-indhold på en responsiv måde.

: svæver - En pseudovælger, der udløses, når en bruger svæver over et element, når denne klasse er tildelt det.

JavaScript

let A block-scope-variabel.

const En blok-scope konstant.

getElementById () - En dokumentmetode, der returnerer en reference til et HTML-element.

getElementsByClassName () - En dokumentmetode, der returnerer en række referencer til html, der har matchende klasser.

+ = - en tildelingsoperator, der tilføjer tal eller sammenkædede strenge.

Ressourcer:

Liveeksempel - En CodePen, der demoer ovenstående kode.

Interactive Flex-Box - En interaktiv CodePen, der viser flex-box-opførsel.

Pexels - Et gratis lagerfotogalleri.

MDN - Et godt sted for information om web ting.

W3School - Lightbox - Denne kode blev inspireret herfra. Tak W3Schools!