Responsive Bildergalerie

Eine responsive Bildergalerie mit Masonry-Layout und Lightbox-Effekt.

Demo

Bild 1
Bild 2
Bild 3
Bild 4

Code

HTML
CSS
JavaScript
<div class="gallery">
  <div class="gallery-item">
    <img src="path/to/image1.jpg" alt="Bild 1" class="gallery-img">
  </div>
  <div class="gallery-item">
    <img src="path/to/image2.jpg" alt="Bild 2" class="gallery-img">
  </div>
  <div class="gallery-item">
    <img src="path/to/image3.jpg" alt="Bild 3" class="gallery-img">
  </div>
  <div class="gallery-item">
    <img src="path/to/image4.jpg" alt="Bild 4" class="gallery-img">
  </div>
</div>
.gallery {
  columns: 3 200px;
  column-gap: 16px;
  padding: 16px;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}
// Einfache Lightbox-Funktionalität
document.querySelectorAll('.gallery-img').forEach(img => {
  img.addEventListener('click', function() {
    const lightbox = document.createElement('div');
    lightbox.classList.add('lightbox');
    
    const imgClone = this.cloneNode();
    imgClone.classList.add('lightbox-img');
    
    lightbox.appendChild(imgClone);
    document.body.appendChild(lightbox);
    
    lightbox.addEventListener('click', function() {
      this.remove();
    });
  });
});

// CSS für die Lightbox
document.head.insertAdjacentHTML('beforeend', `
  <style>
    .lightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      cursor: pointer;
    }
    
    .lightbox-img {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
    }
  </style>
`);

Erklärung

Diese Bildergalerie verwendet mehrere moderne CSS-Techniken:

  • columns - Erstellt ein responsives Masonry-Layout ohne JavaScript
  • break-inside: avoid - Verhindert, dass Elemente in den Spalten umbrechen
  • Hover-Effekte mit transform zum Anheben der Bilder

Der JavaScript-Teil erstellt eine einfache Lightbox-Funktionalität:

  • Klicken auf ein Bild erstellt ein Overlay mit einer vergrößerten Version
  • Klicken auf das Overlay schließt die Lightbox
  • CSS für die Lightbox wird dynamisch hinzugefügt

Verwendung

Diese Galerie eignet sich hervorragend für Fotografie-Websites, Portfolios, Produktgalerien oder überall dort, wo Bilder in einem ansprechenden Layout präsentiert werden sollen.