JavaScript Popup für Bildergalerie erstellen

Um eine Bildergalerie mit einem Popup-Effekt zu erstellen um Bilder beim Klicken zu vergrößern, kannst du JavaScript verwenden. Der Code, den du auf W3Schools gefunden hast ist zwar für ein einzelnes Bild geeignet jedoch du möchtest ihn effizient für alle Bilder in der Galerie verwenden, ohne dass der Code unnötig lang wird. Hier ist eine Möglichkeit, ebenso wie du das erreichen kannst:

Zuerst ist es wichtig sicherzustellen dass jedes Bild in der Galerie ein eindeutiges Element hat das du identifizieren kannst. Zum Beispiel könntest du jedem Bild eine eindeutige ID geben, oder sie in einer Klasse gruppieren. Da du nach einer Lösung suchst die mit Klassen oder Tags arbeitet und bei der Datenmenge leichter umsetzbar ist empfehle ich mit Klassen zu arbeiten.

1. HTML:
Jedes Bild in deiner Galerie erhält die gleiche Klasse, zum Beispiel "gallery-image" und eine eindeutige ID, zum Beispiel "image-1", "image-2", und-so-weiter…

```html
<img class="gallery-image" id="image-1" src="bild1.jpg" alt="Bild 1">
<img class="gallery-image" id="image-2" src="bild2.jpg" alt="Bild 2">
<!-- Weitere Bilder ... -->
```

2. JavaScript:
Verwende JavaScript um auf alle Elemente mit der Klasse "gallery-image" zuzugreifen und einen Klick-Eventlistener hinzuzufügen um das Popup zu öffnen.

```javascript
document.addEventListener("DOMContentLoaded", function() {
const galleryImages = document.querySelectorAll(".gallery-image");
galleryImages.forEach(image => {
image.addEventListener("click", function() {
openModal(this.src, this.alt);
});
});

function openModal(src, alt) {
// Öffne das Popup und zeige das Bild an
// Beispiel: Verwendung von jQuery-basiertem Popup
// Hier müsstest du die spezifische Popup-Logik implementieren
// ...
}
});
```

3. Popup-Logik:
Für das Popup kannst du jQuery oder reines JavaScript verwenden. Wenn du jQuery verwenden möchtest, kannst du ein Modal-Plugin wie zum Beispiel "modal.js" verwenden um ein Popup mit dem vergrößerten Bild und der Schließen-Schaltfläche zu erstellen.

```javascript
function openModal(src, alt) {
const modalContent = `
<img src="${src}" alt="${alt}">
<span class="close">×</span>
`;
// Setze den modalContent in das Popup (mit jQuery oder reinem JavaScript)
// ...
// Füge einen Klick-Eventlistener zur Schließ-Schaltfläche hinzu um das Popup zu schließen
// ...
}
```

Durch diese Vorgehensweise kannst du nun mit wenigen Zeilen JavaScript-Code alle Bilder in deiner Galerie mit dem Popup-Effekt versehen, ohne für jedes Bild individuellen Code schreiben zu müssen. Beachte, dass das Beispiel für das Popup nur eine grobe Vorlage ist und du die spezifische Popup-Logik identisch deinen Anforderungen implementieren musst.