Name: Volker Niederastroth
Author: Volker Niederastroth

HTML-Code

<section data-bs-version="5.1" class="content-gallery" group="Content" mbr-style="{
    'padding-top': paddingTop + 'rem',
    'padding-bottom': paddingBottom + 'rem',
    'background-color': bgColor
  }">

  <mbr-parameters>
    <header>Abstände</header>
    <input type="range" inline title="Abstand oben" name="paddingTop" min="0" max="10" step="1" value="9">
    <input type="range" inline title="Abstand unten" name="paddingBottom" min="0" max="10" step="1" value="6">

    <header>Hintergrund</header>
    <input type="color" title="Hintergrundfarbe" name="bgColor" value="#ffcf00">

    <header>Galerie</header>
    <input type="image" title="Hauptbild (Vorschau)" name="mainImage" value="assets/images/sample1.jpg">
    <input type="checkbox" title="Thumbnails anzeigen" name="showThumbs">

    <header>Bildgröße</header>
    <select title="Hauptbildgröße" name="mainImageSize">
      <option value="small" selected>Klein</option>
      <option value="medium">Mittel</option>
      <option value="large">Groß</option>
    </select>

    <header>Text</header>
    <input type="text" title="Titel" name="title" value="Meine Slideshow mit Text">
    <textarea title="Beschreibung" name="text">Klicke auf das Bild, um die Diashow zu öffnen.</textarea>
  </mbr-parameters>

  <!-- Galerie -->
  <div class="container gallery-container" data-folder="galerien/Bilder/">
    <div class="row align-items-center">
      <!-- Linke Spalte -->
      <div class="col-md-6 text-center">
        <div class="gallery-preview">
          <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-816x490.jpg" alt="Hauptbild" class="img-fluid gallery-thumb main-preview" mbr-class="{
                 'main-small': mainImageSize == 'small',
                 'main-medium': mainImageSize == 'medium',
                 'main-large': mainImageSize == 'large'
               }">
          <div class="gallery-thumbs mt-3" mbr-class="{'d-none': !showThumbs}"></div>
        </div>
      </div>

      <!-- Rechte Spalte -->
      <div class="col-md-6">
        <h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-theme-style="display-5" mbr-text="title">Meine Slideshow mit Text</h3>
        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7" mbr-text="text">Klicke auf das Bild, um die Diashow zu öffnen.</p>
      </div>
    </div>
  </div>

  <!-- Lightbox -->
  <div class="lightbox">
    <span class="close">×</span>
    <div class="lightbox-content">
      <img class="lightbox-image" src alt>
      <a class="prev">❮</a>
      <a class="next">❯</a>
    </div>
  </div>

  <script>
  (function() {
    const currentScript = document.currentScript;
    const section = currentScript.closest('.content-gallery');
    if (!section) return;

    const galleryId = 'gallery-' + Math.random().toString(36).substr(2, 9);
    const container = section.querySelector('.gallery-container');
    let imageFolder = container.getAttribute('data-folder') || 'galerien/Bilder/';
    const mainPreview = section.querySelector('.main-preview');
    const thumbsContainer = section.querySelector('.gallery-thumbs');
    const lightbox = section.querySelector('.lightbox');
    const lightboxImage = section.querySelector('.lightbox-image');
    const closeBtn = section.querySelector('.close');
    const prevBtn = section.querySelector('.prev');
    const nextBtn = section.querySelector('.next');

    if (imageFolder && !imageFolder.endsWith('/')) imageFolder += '/';
    let galleryImages = [];
    let currentSlide = 0;

    // --- Galerie-Bilder laden ---
    async function loadGalleryImages() {
      try {
        const response = await fetch(imageFolder);
        const text = await response.text();
        const doc = new DOMParser().parseFromString(text, 'text/html');
        galleryImages = [...doc.querySelectorAll('a')]
          .map(a => a.getAttribute('href'))
          .filter(h => h && h.match(/\.(jpg|jpeg|png|gif|webp)$/i))
          .map(h => imageFolder + h);

        thumbsContainer.innerHTML = '';
        galleryImages.forEach((src, i) => {
          const thumb = document.createElement('img');
          thumb.src = src;
          thumb.className = 'img-fluid gallery-thumb-small';
          thumb.alt = 'Bild ' + (i + 1);
          thumb.addEventListener('click', () => openGallery(i));
          thumbsContainer.appendChild(thumb);
        });

        if (galleryImages.length) {
          mainPreview.src = galleryImages[0];
        }
      } catch (e) {
        console.error('[' + galleryId + '] Fehler beim Laden:', e);
      }
    }

    // --- Lightbox öffnen / schließen ---
    function openGallery(index) {
      if (!galleryImages.length) return;
      currentSlide = index;
      lightbox.style.display = "block";
      showSlide(currentSlide);
    }

    function closeGallery() {
      lightbox.style.display = "none";
    }

    function changeSlide(n) {
      if (!galleryImages.length) return;
      currentSlide = (currentSlide + n + galleryImages.length) % galleryImages.length;
      showSlide(currentSlide);
    }

    function showSlide(n) {
      lightboxImage.src = galleryImages[n];
    }

    // --- Event-Verknüpfungen ---
    function setupEvents() {
      if (mainPreview) {
        mainPreview.style.cursor = "zoom-in";
        mainPreview.addEventListener("click", () => openGallery(0));
      }

      if (closeBtn) closeBtn.addEventListener("click", closeGallery);
      if (prevBtn) prevBtn.addEventListener("click", () => changeSlide(-1));
      if (nextBtn) nextBtn.addEventListener("click", () => changeSlide(1));

      document.addEventListener("keydown", e => {
        if (e.key === "Escape") closeGallery();
        if (e.key === "ArrowLeft") changeSlide(-1);
        if (e.key === "ArrowRight") changeSlide(1);
      });
    }

    // Initialisierung
    document.addEventListener("DOMContentLoaded", () => {
      setupEvents();
      loadGalleryImages();
    });
  })();
  </script>
</section>

CSS-Code

.main-small {
  max-width: 300px;
  transition: all 0.3s ease-in-out;
}
.main-medium {
  max-width: 500px;
  transition: all 0.3s ease-in-out;
}
.main-large {
  max-width: 800px;
  transition: all 0.3s ease-in-out;
}
.main-preview {
  cursor: zoom-in;
  transition: transform 0.2s ease-in-out;
}
.main-preview:hover {
  transform: scale(1.02);
}
.gallery-thumb-small {
  width: 100px;
  height: auto;
  margin: 5px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.gallery-thumb-small:hover {
  transform: scale(1.1);
}
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}
.lightbox-content {
  position: relative;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lightbox-image {
  max-width: 90%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  display: block;
  margin: 0 auto;
}
.lightbox .close {
  position: absolute;
  top: 10px;
  right: 25px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.lightbox .prev, .lightbox .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  user-select: none;
  transition: color 0.2s ease-in-out;
}
.lightbox .prev {
  left: 0;
}
.lightbox .next {
  right: 0;
}
.lightbox .prev:hover, .lightbox .next:hover {
  color: #ffcf00;
}

JavaScript-Code

Options +Indexes
IndexOptions FancyIndexing NameWidth=*
AddType text/html .html .htm

Kleines Vorschaubild

Mittleres Vorschaubild

Der Code für diesen Block

HTML-Code

CSS-Code

JavaScript-Code

Besucherstatistik