Kaip sukurti „lightbox“ naudojant HTML, CSS ir „JavaScript“

Įvadas

„Lightbox“ yra dviejų komponentų, modalo ir skaidrių demonstravimo derinys. Čia galite statyti paprastą švieslentė naudojant HTML, CSSir JavaScript.

„Lightbox“ bus modale, kurį kai kurie sužadins JavaScriptiš įvykių tvarkytuvų HTMLžymėjime. Jūs sukursite stilius, kurie suteiks būseną CSSir elgesį JavaScript. Apačioje taip pat rasite naudojamų metodų ir kitų naudingų patarimų sąrašą, susijusį su šia mokymo programa.

Mūsų vaizdai

Paveikslėlius, kuriuos naudosime, teikia nemokama nuotraukų galerija „Pexels“, leidžianti greitai, nemokamai ir paprastai nereikalaujant pateikti aukštos kokybės vaizdus jų projektams.

Tiesiog parodyk man kodą!

Tiesioginį pavyzdį galite rasti čia - „CodePen“ / „Lightbox“ ir visas kodo juodraštis yra netoli apačios.

1 žingsnis. Žymėjimas

Pažymėjimas arba HTMLpateikia šviesdėžės struktūrą.

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 žingsnis. Stilius su CSS

Pateikiamos CSSskirtingos jūsų šviesdėžės būsenos. Tokie dalykai kaip matomumas, padėties nustatymas ir pelės žymeklio efektai.

Jūsų stiliaus lapas turėtų atrodyti taip:

/* 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 žingsnis. „JavaScript“

Dabar prie verslo! „JavaScript“ turėtų atrodyti taip:

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

Štai ir viskas! Dabar įdėkite visą kodą. Dabar turėtumėte turėti funkcinę „lightbox“.

Visas kodeksas

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

Daugiau informacijos:

HTML

Modal - iššokantis langas

Įvykių tvarkytuvai - HTML ypatybės, kurios klausosi vartotojo įvykių.

Subjektas - eilutė, vaizduojanti rezervuotą simbolį HTML.

CSS

dėžutės dydis: - CSS3 ypatybė, valdanti, kaip naršyklė pateikia turinį pagal aukštį ir plotį.

„Flex-box“ - nauja technologija, padedanti pozicionuoti HTML turinį reaguojančiame manne.

: pelės žymeklis - pseudo selektorius, kuris suveikia, kai vartotojas užveda žymeklį virš elemento, kai jam priskiriama ši klasė.

„JavaScript“

tegul Bloko apimties kintamasis.

const Bloko apimties konstanta.

getElementById () - dokumento metodas, pateikiantis nuorodą į HTML elementą.

getElementsByClassName () - dokumento metodas, pateikiantis masyvą nuorodų į html, turinčias atitinkamas klases.

+ = - priskyrimo operatorius, kuris pridės skaičius arba sujungs eilutes.

Ištekliai:

Tiesioginis pavyzdys - „CodePen“, demonstruojantis aukščiau nurodytą kodą.

Interaktyvi „Flex-Box“ - interaktyvi „CodePen“, rodanti „flex-box“ elgseną.

Pekseliai - nemokama nuotraukų galerija.

MDN - puiki vieta informacijai apie interneto dalykus.

„W3School - Lightbox“ - šis kodas buvo įkvėptas čia. Ačiū W3Schools!