19.03.2024, 22:14
Das wird jetzt ein wenig komplizierter. Für die Kombination aus Bild und Text empfiehlt sich das figure-Element, siehe z. B. hier:
https://wiki.selfhtml.org/wiki/Bilder_im...schreibung
Jedem Thumbnail musst Du ein figure-Element zuordnen.
Du musst dann nicht nur das figure-Element, das zu dem Thumbnail gehört, sichtbar machen sondern auch das bisher angezeigt wieder unsichtbar. letzteres aber nur in der Gruppe (links oder rechts), die dazu gehört.
Das leistet dieses HTML und Javascript:
https://wiki.selfhtml.org/wiki/Bilder_im...schreibung
Jedem Thumbnail musst Du ein figure-Element zuordnen.
Du musst dann nicht nur das figure-Element, das zu dem Thumbnail gehört, sichtbar machen sondern auch das bisher angezeigt wieder unsichtbar. letzteres aber nur in der Gruppe (links oder rechts), die dazu gehört.
Das leistet dieses HTML und Javascript:
Zitat:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Thumbnails Gallery</title>
<style>
/* Alle figure-Elemente, die nicht die Klasse "visi"
haben, unsichtbar machen: */
figure:not(.visi) {
display: none;
}
</style>
</head>
<body>
<!-- Die Thumbnails der linken Galerie: -->
<section id="thumbs-left" data-dest-wrapper="#banners-left" class="tabcontent thumbs-gallery">
<img src="images/dia0_th.jpg" data-dest="#banner-left-0">
<img src="images/dia1_th.jpg" data-dest="#banner-left-1">
<img src="images/dia2_th.jpg" data-dest="#banner-left-2">
</section>
<!-- Die Banner der linken Galerie: -->
<section id="banners-left" class="banners">
<figure id="banner-left-0">
<img src="images/dia0.jpg">
<figcaption>
Der Text für das erste Bild in der linken Galerie
</figcaption>
</figure>
<figure id="banner-left-1">
<img src="images/dia1.jpg">
<figcaption>
Der Text für das zweite Bild in der linken Galerie
</figcaption>
</figure>
<figure id="banner-left-2">
<img src="images/dia2.jpg">
<figcaption>
Der Text für das dritte Bild in der linken Galerie
</figcaption>
</figure>
</section>
<!-- Die Thumbnails der rechten Galerie: -->
<section id="thumbs-right" data-dest-wrapper="#banners-right" class="tabcontent thumbs-gallery">
<img src="images/dia3_th.jpg" data-dest="#banner-left-2">
<!-- Hier die weiteren Thumbnails für die rechte Galerie -->
</section>
<!-- Die Banner der rechten Galerie: -->
<section id="banners-right" class="banners">
<figure id="banner-right-0">
<img src="images/dia3.jpg">
<figcaption>
Der Text für das erste Bild in der rechten Galerie
</figcaption>
</figure>
<!-- Hier die weiteren figure-Elemente für die rechte Galerie-->
</section>
<button id="reset">Reset</button>
<script>
// Eventlistener für Klick irgend wo auf der Seite registrieren:
window.addEventListener('click', event => {
// Wurde ein Thumbnail geklickt?
if (event.target.matches('[data-dest]')) {
const
// Der Wrapper für die Thumbnails:
wrapper = event.target.closest('.thumbs-gallery'),
// Der Selektor für den Wrapper der Banner:
selBanners = wrapper.dataset.destWrapper,
// Der Wrapper für die Banner:
wrBanners = document.querySelector(selBanners),
// Das Ziel bzw. das Banner, das angezeigt werden soll:
dest = wrBanners.querySelector(event.target.dataset.dest),
// Das Banner, dass zzt. angezeigt wird:
activeFigure = wrBanners.querySelector('figure.visi');
// Das aktuell angezeigte Banner unsichtbar machen:
if (activeFigure) activeFigure.classList.remove('visi');
// Das neue Bannen sichtbar machen:
dest.classList.add('visi');
}
// Wurde der Reset-Button gedrückt?
if (event.target.id == 'reset') {
// Über alle Wrapper mit Bannern:
document.querySelectorAll('.banners').forEach(wrBanners => {
const
// Das erste Banner:
first = wrBanners.firstElementChild,
// Das Banner, das zzt. angezeigt wird:
activeFigure = wrBanners.querySelector('figure.visi');
// Das aktuell angezeigte Banner unsichtbar machen:
if (activeFigure) activeFigure.classList.remove('visi');
// Das erste Banner sichtbar machen:
first.classList.add('visi');
});
}
});
</script>
</body>
</html>
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)