So erstellen Sie eine Lightbox mit HTML, CSS und JavaScript

Einführung

Ein Leuchtkasten ist eine Kombination aus zwei Komponenten, einer modalen und einer Diashow. Hier bauen Sie einen einfachen Leuchtkasten mit HTML, CSSund JavaScript.

Der Leuchtkasten wird im Modal enthalten sein, das von einigen JavaScriptvon Ereignishandlern im HTMLMarkup ausgelöst wird . Sie erstellen Stile, die Status CSSund Verhalten bieten JavaScript. Unten finden Sie auch eine Referenzliste der von Ihnen verwendeten Methoden und anderer nützlicher Leckerbissen, die sich auf dieses Lernprogramm beziehen.

Unsere Bilder

Die Bilder, die wir verwenden werden, werden von Pexels bereitgestellt, einer kostenlosen Stock-Fotogalerie, mit der Sie ihren Projekten schnell, kostenlos und in der Regel ohne Namensnennung qualitativ hochwertige Bilder zur Verfügung stellen können.

Zeig mir einfach den Code!

Ein Live-Beispiel finden Sie hier - CodePen / Lightbox und ein vollständiger Entwurf des Codes befindet sich unten.

Schritt 1. Das Markup

Das Markup oder HTMLstellt die Struktur für den Leuchtkasten bereit.

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.

Schritt 2. Mit CSS stylen

Das CSSbietet Ihnen verschiedene Zustände für Ihren Leuchtkasten. Dinge wie Sichtbarkeit, Positionierung und Hover-Effekte.

Ihr Stylesheet sollte folgendermaßen aussehen:

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

Schritt 3. JavaScript

Nun zum Geschäft! Ihr JavaScript sollte folgendermaßen aussehen:

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

Und das ist es! Fügen Sie nun den gesamten Code zusammen. Sie sollten jetzt einen funktionierenden Leuchtkasten haben.

Der ganze Code

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

Mehr Informationen:

HTML

Modal - Ein Popup-Fenster

Ereignishandler - HTML-Eigenschaften, die auf Benutzerereignisse warten.

Entität - Eine Zeichenfolge, die ein reserviertes Zeichen in HTML darstellt.

CSS

Box-Sizing: - Eine CSS3-Eigenschaft, die die Art und Weise steuert, wie der Browser Inhalte basierend auf Höhe und Breite rendert.

Flex-Box - Eine neue Technologie, mit der HTML-Inhalte reaktionsschnell positioniert werden können.

: hover - Ein Pseudo-Selektor, der ausgelöst wird, wenn ein Benutzer mit der Maus über ein Element fährt, wenn ihm diese Klasse zugewiesen wird.

JavaScript

let Eine Block-Scope-Variable.

const Eine Block-Scope-Konstante.

getElementById () - Eine Dokumentmethode, die einen Verweis auf ein HTML-Element zurückgibt.

getElementsByClassName () - Eine Dokumentmethode, die ein Array von Verweisen auf den HTML-Code mit übereinstimmenden Klassen zurückgibt.

+ = - ein Zuweisungsoperator, der Zahlen hinzufügt oder Zeichenfolgen verkettet.

Ressourcen:

Live-Beispiel - Ein CodePen, der den obigen Code demonstriert.

Interaktive Flexbox - Ein interaktiver CodePen, der das Verhalten der Flexbox anzeigt.

Pexels - Eine kostenlose Fotogalerie.

MDN - Ein großartiger Ort für Informationen über Web-Inhalte.

W3School - Lightbox - Dieser Code wurde von hier inspiriert. Danke W3Schools!