Beispiel:Lightbox-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
  <title>Bildwechsler - 4</title>
  <style>
.gallery a img {
	width: 6em;
}

.gallery a {
	text-decoration: none;
}

[hidden] {
	display: none;
}
 
dialog img {
  padding: 0;
  margin: 0;	
  width: 100%;  /* Bild passt sich an verfügbaren Raum im dialog an */
}

dialog {
  position:relative;
}

dialog::backdrop {
  background-color: #337599;
	opacity:0.5;
}

#lightbox {
	border: thin solid #aaa;
	left: 1em;
	position: fixed;
	top: 1em;
}

#lightbox img {
	display: block;
	margin: auto;
	max-width: 90vw;
	max-height: 80vh;
}

#lightbox figcaption {
	font-style: italic;
	text-align: center;
}

#lightbox button {
	position: absolute;
	top: 0;
	right: 0;
	width: 2rem;
	height: 2rem;
	cursor: pointer;
	border: 0;
	font: 0/0 a;
	text-shadow: none;
	background: transparent;
	color: transparent;
}

#lightbox #close {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='firebrick' rx='10' /%3E%3Cpath d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
}

#lightbox #close:hover,
#lightbox #close:focus {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='red' rx='10' /%3E%3Cpath d='M20,20 l60,60 m0,-60 l-60,60' fill='none' stroke='white' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

#lightbox button:nth-of-type(2) {
	top: 50%;
	left: 1em;
	width: 4rem;
	height: 8rem;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='right' d='M90,10 l-80,90 l80,90' fill='none' stroke='%2387ceeb' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
}

#lightbox button:nth-of-type(2):hover,
#lightbox button:nth-of-type(2):focus {
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='right' d='M90,10 l-80,90 l80,90' fill='none' stroke='%23337599' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

#lightbox button:nth-of-type(3) {
	top: 50%;
	right: 1em;
	width: 4rem;
	height: 8rem;
	background-image: url("data:image/svg+xml,%3Csvg width='100' height='200' viewBox='0 0 100 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='right' d='M10,10 l80,90 l-80,90' fill='none' stroke='%2387ceeb' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: contain;
}

@media (prefers-reduced-motion: no-preference) {
  #lightbox[open] img {
    animation: show 0.25s ease-in-out normal;
}

  @keyframes show {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}


 /* Mobile first - für schmale Viewports */
ul,li {
	display:inline-block;
	margin: 0.1em;
	padding: 0.1em;
}
 
li {
	list-style-type: none;
}

 
[role=note] {
	border-left: medium solid #c82f04;
	padding-left: 0.5em;
	max-width: 40em;
}

[role=note]:before {
	content: 'Beachten:  ';
	color: #c82f04;
	font-weight: blod;
}
  </style>
<script>
"use strict";
document.addEventListener("DOMContentLoaded", () => {
	const
	// selektiert alle Bilder, die Kindelemente eines a-Elements sind
		allPics = document.querySelectorAll(".gallery a > img"),
		// container für die Bildunterschrift (Alternativtext der Vorschau)
		caption = document.createElement("figcaption"),
		// schließen-Button der Großansicht
		close = document.createElement("button"),
		// container für die Großansicht
		// container für die Bildunterschrift (Alternativtext der Vorschau)
		lightbox = document.createElement("dialog"),
  	figure = document.createElement("figure"),
		// Platzhalter für das eigentliche Großansicht-Bild
		full = document.createElement("img"),
		// Button zum Weiterschalten
		next = document.createElement("button"),
		// Button zum Zurückschalten
		prev = document.createElement("button");
	// aktuell anzuzeigendes Bild aus der Liste
	let currentPic = 0;
	// Button-Beschriftungen
	close.textContent = "schließen";
	next.textContent = "nächstes Bild";
	prev.textContent = "vorheriges Bild";
	// Button-IDs für einfacheres CSS
	close.id = 'close';
	next.id = 'next';
	prev.id = 'prev';
	// Großansicht mit ID versehen...
	lightbox.id = "lightbox";
	// eigentliches Großansichtbild einfügen
	lightbox.appendChild(figure);
	// container für Bild und Bildunterschrift einfügen
	figure.appendChild(full);
	figure.appendChild(caption);
	// Buttons einfügen
	lightbox.appendChild(close);
	lightbox.appendChild(prev);
	lightbox.appendChild(next);

	// Großansicht ins Dokument einfügen
	document.body.appendChild(lightbox);
	// click-Handler auf das Dokument einrichten
	document.addEventListener("click", evt => {
		// kommt click aus Vorschaubild?
//		let showFull = false; // gehe nicht davon aus
		allPics.forEach((element, index) => {
			// wurde Vorschaubild oder Link drumherum angeklickt?
			if (evt.target == element || evt.target == element.parentNode) {
				// merke gewünschtes Bild
				currentPic = index;
				// wir wollen jetzt die Vollanzeige
				lightbox.showModal();
			}
		});
		
		if (evt.target == close) {
			lightbox.close();
		}
		// kommt click aus Teilen der Großansicht?
		[caption, figure, full, next, prev].forEach(element => {
			if (evt.target == element) {
				// Beim schließen-Button bleibt showFull false,
				// denn der schließen-Button wird hier nicht erfasst.
	//			showFull = true;
				// letztes Bild in der Liste ereicht?
				if (element == next && currentPic < allPics.length - 1) {
					// nein, weiterschalten
					currentPic++;
				}
				// erstes Bild in der Liste ereicht?
				if (element == prev && currentPic) { // kürzer als (currentPic > 0)
					// nein, zurückschalten
					currentPic--;
				}
			}
		});
		if (lightbox) {
			// dem ausgewählten Bild die URL der Großansicht zuweisen
			full.src = allPics[currentPic].parentNode.href;
			// Bildunterschrift aus Alternativtext
			caption.textContent = allPics[currentPic].alt;
			// nächstes-Bild-Button anzeigen?
			if (currentPic < allPics.length - 1) {
				next.removeAttribute("hidden");
			} else {
				next.setAttribute("hidden", "hidden");
			}
			// vorheriges-Bild-Button anzeigen?
			if (currentPic) {
				prev.removeAttribute("hidden");
			} else {
				prev.setAttribute("hidden", "hidden");
			}
			// Link-Funktionalität unterbrechen
			evt.preventDefault();
		} else {
			// Großansicht unsichtbar schalten
			lightbox.close();
		}
	});
});

 
  </script>  
</head>
<body>

<h1>Bild-Wechsler mit Lightbox</h1>
<section id="peru" class="gallery">
	<h2>Peru 2007</h2>
	<a href="https://wiki.selfhtml.org/images/2/28/Peru-1.jpg"> <img src="https://wiki.selfhtml.org/images/2/24/Peru-1-sm.jpg" alt="Peru 2007: Cusco - Blick auf Ausangate">		</a>
	<a href="https://wiki.selfhtml.org/images/4/42/Peru-2.jpg"> <img src="https://wiki.selfhtml.org/images/e/ea/Peru-2-sm.jpg" alt="Peru 2007: Valle Sagrado">		</a>
	<a href="https://wiki.selfhtml.org/images/a/ab/Peru-3.jpg"> <img src="https://wiki.selfhtml.org/images/c/c5/Peru-3-sm.jpg" alt="Peru 2007: Machu Picchu">		</a>
	<a href="https://wiki.selfhtml.org/images/8/80/Peru-4.jpg"> <img src="https://wiki.selfhtml.org/images/b/b0/Peru-4-sm.jpg" alt="Peru 2007: Machu Picchu - Lamas in den Ruinen">		</a>
	<a href="https://wiki.selfhtml.org/images/3/3f/Peru-5.jpg"> <img src="https://wiki.selfhtml.org/images/7/71/Peru-5-sm.jpg" alt="Peru 2007: Uros-Inseln im Titicaca-See">		</a>
	<a href="https://wiki.selfhtml.org/images/4/41/Peru-6.jpg"> <img src="https://wiki.selfhtml.org/images/5/5b/Peru-6-sm.jpg" alt="Peru 2007: Ceviche - Meeresfrüchte mit Zitronensaft">		</a>
</section>
<section id="landscape" class="gallery">
	<h2>Rund um die Welt 2025</h2>
	<a href="//wiki.selfhtml.org/images/4/4b/Landscape-1.svg"> 
      <img src="//wiki.selfhtml.org/images/4/4b/Landscape-1.svg" alt="Landschaft in der Toskana">
	</a>
	<a href="//wiki.selfhtml.org/images/d/dc/Landscape-2.svg">
       <img src="//wiki.selfhtml.org/images/d/dc/Landscape-2.svg" alt="Gebirge tagsüber">
	</a>
	<a href="//wiki.selfhtml.org/images/6/6e/Landscape-2-night.svg">
        <img src="//wiki.selfhtml.org/images/6/6e/Landscape-2-night.svg" alt="Gebirge bei Nacht">
	</a>
	<a href="//wiki.selfhtml.org/images/b/bb/Landscape-3.svg">
         <img src="//wiki.selfhtml.org/images/b/bb/Landscape-3.svg" alt="Abendstimmung am See">
	</a>
	<a href="https://wiki.selfhtml.org/images/1/15/Gardasee-5.jpg"> <img src="https://wiki.selfhtml.org/images/c/c3/Gardasee-5-sm.jpg" alt="Gardasee 2016: Sonnenuntergang bei Bardolino">	
	</a>
	<a href="//wiki.selfhtml.org/images/b/b9/Seascape.svg">
       <img src="//wiki.selfhtml.org/images/b/b9/Seascape.svg" alt="Unterewasserlandschaft">
	</a>
</section>
<p>Bei einem Klick auf die <em>Thumbnail</em>-Vorschau erhältst du eine Großansicht.</p>
 
</body>
</html>

Abgerufen am 13.11.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Lightbox-4.html"