Beispiel:JS-DOM-Bild-5.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:SELFHTML-Beispiel-Grundlayout.css">
  <title>Bildwechsler - der letzte Schliff</title>
  <style>
.gallery img {
	width: 100px;
}

.gallery a {
	text-decoration: none;
}

[hidden] {
	display: none;
}

#fullview {
	border: 1px solid #aaa;
	left: 1em;
	position: fixed;
	top: 1em;
}

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

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

#fullview 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; 	
}

#fullview button:nth-of-type(1) {
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='black' 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;
}
#fullview button:nth-of-type(1):hover,
#fullview button:nth-of-type(1):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");
}

#fullview button:nth-of-type(2) {
	top: 50%;
	left: 0;
	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='%23fff' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: contain;
}
#fullview button:nth-of-type(2):hover,
#fullview 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='%2387ceeb' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}

#fullview button:nth-of-type(3) {
	top: 50%;
	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='%23fff' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
background-size: contain;
}
#fullview button:nth-of-type(3):hover,
#fullview button:nth-of-type(3):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='M10,10 l80,90 l-80,90' fill='none' stroke='%2387ceeb' stroke-width='15' stroke-linecap='round'/%3E%3C/svg%3E");
}


</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
		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...
	figure.id = "fullview";
	// ... und zunächst unsichtbar schalten.
	figure.setAttribute("hidden", "hidden");
	// eigentliches Großansichtbild einfügen
	figure.appendChild(full);
	// Buttons einfügen
	figure.appendChild(close);
	figure.appendChild(prev);
	figure.appendChild(next);
	// container für die Bildunterschrift einfügen
	figure.appendChild(caption);

	// Großansicht ins Dokument einfügen
	document.body.appendChild(figure);

	// 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
				showFull = true;
			}
		});

		// 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 (showFull) {

			// dem ausgewählten Bild die URL der Großansicht zuweisen
			full.src = allPics[currentPic].parentNode.href;
			// Bildunterschrift aus Alternativtext
			caption.textContent = allPics[currentPic].alt;
			// sichtbar schalten
			figure.removeAttribute("hidden");

			// 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
			figure.setAttribute("hidden", "hidden");
		}
	});
});

  </script>
</head>
<body>
<h1>Bild-Wechsler - der letzte Schliff</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="gardasee" class="gallery">
  <h2>Gardasee 2016</h2>
  <a href="https://wiki.selfhtml.org/images/f/fb/Gardasee1.jpg">
    <img src="https://wiki.selfhtml.org/images/8/8f/Gardasee1-sm.jpg" alt="Gardasee 2016: Sonnenuntergang bei Bardolino ">
  </a>
  <a href="https://wiki.selfhtml.org/images/1/16/Gardasee2.jpg">
    <img src="https://wiki.selfhtml.org/images/6/67/Gardasee2-sm.jpg" alt="Gardasee 2016: Aperol Spritz - Entspannung für Lehrer ">
  </a>
  <a href="https://wiki.selfhtml.org/images/3/3b/Gardasee-3.jpg">
    <img src="https://wiki.selfhtml.org/images/4/40/Gardasee-3-sm.jpg" alt="Gardasee 2016: Gardaland bei Bardolino - Blick von oben">
  </a>
  <a href="https://wiki.selfhtml.org/images/e/ef/Gardasee-4.jpg">
    <img src="https://wiki.selfhtml.org/images/1/16/Gardasee-4-sm.jpg" alt="Gardasee 2016: Wasserrutsche im Gardaland ">
  </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="https://wiki.selfhtml.org/images/5/5a/Gardasee-6.jpg">
    <img src="https://wiki.selfhtml.org/images/d/d4/Gardasee-6-sm.jpg" alt="Gardasee 2016: nächtliches Handballspiel ">
  </a>
  <a href="https://wiki.selfhtml.org/images/2/2e/Gardasee-7.jpg">
    <img src="https://wiki.selfhtml.org/images/a/a4/Gardasee-7-sm.jpg" alt="Gardasee 2016: Die antike Arena in Verona - heute für Konzerte und Opern genutzt ">
  </a>
</section>

<p>Bei einem Klick auf die <em>Thumbnail</em>-Vorschau erhalten Sie eine Großansicht.</p>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-DOM-Bild-5.html&oldid=81710“