Artikel-Hilfsmenü
Samstag, 9. März 2024 – aktualisiert am Samstag, 23. März 2024
Webdesign · JavaScript · CSS
Ein Popup „Lightbox-Style“ mit JavaScript und CSS
Um mehrere Bilder auf einer Webseite zu präsentieren, greift man gerne zu Lightbox, oder einer der zahlreichen Alternativen.
Wenn aber nur ein einzelnes Bild in Großansicht gezeigt werden soll, lässt sich dies auch mit wenigen Zeilen JavaScript und CSS realisieren.
Demo:
Der Link kann entweder Text oder auch ein Vorschaubild sein.
Bild zeigen
×
Foto: unsplash.com
Das JavaScript
<script>
// JavaScript zum Öffnen und Schließen der Lightbox
document.addEventListener('DOMContentLoaded', function() {
var openLightbox = document.getElementById('open-lightbox');
var closeLightbox = document.getElementById('close-lightbox');
var lightbox = document.getElementById('lightbox');
// Funktion zum Öffnen der Lightbox
openLightbox.addEventListener('click', function() {
lightbox.style.display = 'block';
});
// Funktion zum Schließen der Lightbox
function closeLightboxFunction() {
lightbox.style.display = 'none';
}
// Schließen mittels X
closeLightbox.addEventListener('click', closeLightboxFunction);
// Schließe die Lightbox bei jedem Tastendruck
document.addEventListener('keydown', closeLightboxFunction);
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == lightbox) {
closeLightboxFunction();
}
}
// Schließe die Lightbox bei Berührung außerhalb der Lightbox auf Touchscreens
document.addEventListener('click', function(event) {
if (!event.target == lightbox) {
closeLightboxFunction();
}
});
});
</script>
Das CSS
<style>
/* CSS für die Lightbox-Stile */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
text-align: center;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 1s;
animation-name: animatetop;
animation-duration: 1s
cursor:zoom-out;
}
.lightbox img {
max-width: 90%;
max-height: calc(100% - 70px);
margin-top: 50px;
cursor: default;
}
.lightbox p {
color:#fff;
padding:0 !important;
cursor: default;
}
#open-lightbox img{
cursor:zoom-in;
}
@media screen and (max-width:600px) {
.lightbox img {
max-width: 95% !important;
max-height: 80%;
border:1px solid #888;
}
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {opacity:0}
to {opacity:1}
}
@keyframes animatetop {
from {opacity:0}
to {opacity:1}
}
/* The Close Button */
.close {
color: white;
position: absolute;
right: 1em;
top:0;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
text-decoration: none;
cursor: pointer;
}
@media screen and (max-width:600px) {
.close {
top:-.5em;
}
}
</style>
Der HTML-Aufruf
<!-- Klickbarer Link zum Öffnen der Lightbox -->
<span id="open-lightbox" style="text-decoration:underline;cursor:pointer;">Bild zeigen</span>
<!-- Lightbox-Container -->
<div class="lightbox" id="lightbox">
<p id="close-lightbox" class="close" style="cursor: pointer;color:#fff">×</p>
<img src="pfad_zum_bild/bild.jpg" alt="Beispielbild">
</div>
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
3 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Dietmar Liste schrieb am Mittwoch, 04.09.24 19:42 Uhr:
Ne nette Lösung. Ich habe aber statt "Bild zeigen" ein Vorschaubild verwendet, das ich per position so zeige, das es vom Popup verdeckt wird. "Bild zeigen" ist ja ein Link ins Ungewisse.
Fritz schrieb am Mittwoch, 04.09.24 20:04 Uhr:
@Dietmar schon klar. Ein Textlink sollte ja nicht "Bild zeigen" lauten, sondern sollte das Linkziel beschreiben. Das gilt _immer_
Und Textlink ist ja auch eine Sonderlösung. Der Standardfall ist, wie von dir beschrieben, ein anklickbares Vorschaubild. Wie auch hier im Artikel gezeigt.
Dietmar Liste schrieb am Samstag, 07.09.24 10:43 Uhr:
... ich verwende seit 100 Jahren Colorbox und bin nach dem Ausprobieren von diversen Alternativen immer wieder zu Colorbox zurückgekehrt.
https://dliste.de/colorbox/