Mobirise-Tutorials.com

Hier noch ein verbesserter Code, der auch die Bildgröße in 3 Stufen ändert.
Klein, Mittel und Groß.

im ersten Block hab ich jetzt auf klein gestellt: https://www.niederastroth.de/bildklick.html

HTML Teil:

Code: Alles auswählen

<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 Teil:

Code: Alles auswählen

.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;
}

https://www.fallprotectionengineering.e ... ipment.php
Unten auf der Seite habe ich Deinen Block versucht einzuarbeiten. Aber irgendwo habe ich einen Fehler drin, den ich nicht sehe.
Wenn Du Zeit hast, könntest Du bitte mal schaun?
Ist Bootstrap 4, weßhalb ich in dem gelben Block "Meine Slideshow mit Text" in der Section den Verweis auf BS5 entfernt habe. Aber auch mit dem Verweis geht es nicht.

Das Javascript scheint nicht ausgeführt zu werden

Frank

Muss ich umbauen für M4

Warte dauert etwas

https://www.niederastroth.de/m4stober/

Jetzt als M4 Block:

HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="content-gallery" group="Content" mbr-style="{
           'padding-top': paddingTop + 'rem',
           'padding-bottom': paddingBottom + 'rem',
           'background-color': bgColor
         }" data-padding-top="8" data-padding-bottom="6" data-bg-color="#ffcf00" data-main-image="galerien/Test/bild1.jpg" data-show-thumbs="true" data-main-image-size="medium" data-title="Meine Slideshow mit Text" data-text="Klicke auf das Bild, um die Diashow zu öffnen." data-folder="galerien/Test/">

  <!-- 🧩 Parameter-Fenster (nur M5) -->
  <mbr-parameters>
    <header>Abstände</header>
    <input type="range" inline title="Abstand oben" name="paddingTop" min="0" max="10" step="1" value="8">
    <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" name="mainImage" value="galerien/Test/bild1.jpg">
    <input type="checkbox" title="Thumbnails anzeigen" name="showThumbs">

    <header>Bildgröße</header>
    <select title="Hauptbildgröße" name="mainImageSize">
      <option value="small">Klein</option>
      <option value="medium" selected>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">
    <div class="row align-items-center">
      <!-- Linke Spalte -->
      <div class="col-md-6 text-center">
        <div class="gallery-preview">
          <img src="galerien/Test/bild1.jpg" alt="Hauptbild" class="img-fluid gallery-thumb main-preview main-medium" 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 display-5" mbr-text="title">
          Meine Slideshow mit Text
        </h3>
        <p class="mbr-text mbr-fonts-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 -->
  <script>
  (function() {
    const currentScript = document.currentScript;
    const section = currentScript.closest('.content-gallery');
    if (!section) return;

    // --- Parameter + Fallback (für M4)
    const paddingTop = section.dataset.paddingTop || 5;
    const paddingBottom = section.dataset.paddingBottom || 5;
    const bgColor = section.dataset.bgColor || '#ffffff';
    let imageFolder = section.dataset.folder || 'galerien/Test/';
    const showThumbs = section.dataset.showThumbs === 'true';
    const mainImageSize = section.dataset.mainImageSize || 'medium';
    const mainImageSrc = section.dataset.mainImage || '';
    const titleText = section.dataset.title || '';
    const descText = section.dataset.text || '';

    // Pfadkorrektur
    if (imageFolder && !imageFolder.endsWith('/')) imageFolder += '/';
    if (!imageFolder.startsWith('http') && !imageFolder.startsWith('/')) {
      imageFolder = location.origin + '/' + imageFolder;
    }

    // Layout anwenden
    section.style.paddingTop = paddingTop + 'rem';
    section.style.paddingBottom = paddingBottom + 'rem';
    section.style.backgroundColor = bgColor;

    const mainPreview = section.querySelector('.main-preview');
    const thumbsContainer = section.querySelector('.gallery-thumbs');
    const titleEl = section.querySelector('.mbr-section-title');
    const textEl = section.querySelector('.mbr-text');

    if (mainPreview) {
      mainPreview.src = mainImageSrc;
      mainPreview.classList.remove('main-small','main-medium','main-large');
      mainPreview.classList.add('main-' + mainImageSize);
    }
    if (titleEl) titleEl.textContent = titleText;
    if (textEl) textEl.textContent = descText;
    if (!showThumbs && thumbsContainer) thumbsContainer.style.display = 'none';

    // --- Lightbox Setup
    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');

    let galleryImages = [];
    let currentSlide = 0;

    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);

        if (!thumbsContainer) return;
        thumbsContainer.innerHTML = '';
        galleryImages.forEach((src, i) => {
          const thumb = document.createElement('img');
          thumb.src = src;
          thumb.alt = 'Bild ' + (i + 1);
          thumb.addEventListener('click', () => openGallery(i));
          thumbsContainer.appendChild(thumb);
        });

        if (galleryImages.length && mainPreview) {
          mainPreview.src = galleryImages[0];
        }
      } catch(e) {
        console.warn('Fehler beim Laden der Galerie:', e);
      }
    }

    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]; }

    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);
    });

    loadGalleryImages();
  })();
  </script>
</section>

CSS:

Code: Alles auswählen

.content-gallery {
  position: relative;
}
.gallery-container {
  transition: all 0.3s ease;
}
.main-small {
  max-width: 250px;
}
.main-medium {
  max-width: 450px;
}
.main-large {
  max-width: 650px;
}
.gallery-thumbs img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin: 4px;
  cursor: pointer;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.gallery-thumbs img:hover {
  border-color: #999;
}
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  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;
  object-position: center;
  display: block;
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #fff;
  font-weight: bold;
  font-size: 30px;
  transition: 0.3s;
  user-select: none;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
@media (max-width: 767px) {
  .main-large {
    max-width: 100%;
  }
  .gallery-thumbs img {
    width: 60px;
    height: 60px;
  }
}

Falls eine Fehlermeldung beim veröffentlichen kommt - ingnorieren

STOBER Du Hupe

DU musst die htacces da rein setzten !!!

Code: Alles auswählen

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

Sonst läuft die ganze Kacke doch nicht

Deine Seite :https://www.fallprotectionengineering.e ... ien/Bilder

Meine Seite : https://www.niederastroth.de/galerien/Test/

Finde den Fehler

Ich frag mich manchmal echt ob überhaupt einer meine Videos und meine Anleitungen anschaut

Das Javascript kommt ohne die htaccess nicht an die Bilder - fetch läuft sich einen Wolf weil keinen Zugriff !!!

DAs ist aber auch nur eine harmlose htaccess - die tut nix ( falls einer wegen Sicherheit rum jammert )

Volker, Du Tröte

Die erste Version läuft auch nicht mit htaccess.
Die zweite Version kann nicht funktionieren, weil der Pfad auf das BIlder-Verzeichnis im Java sitzt und somit keine 6 Galerien in einem Block sitzen können.

UND: ich lese wirklich niemals Anleitungen, das liegt nicht an Dir. Wenn ich etwas verstehen will, dann fuchse ich mich da rein, unter Umständen mit überflüssigen Fragen. Aber wenn es dann klappt, verstehe ich das auch noch in Jahren.
Bedienungsanleitung nur im Notfall.

Die nächste Antwort dann mit einem anderen Instrument

bin mal eben zum Aldi

======
Äh, moment... htaccess ins root? Nein!

htaccess nur in den Ordner der Bilder, also wenn eine Ordner Bilder da ist und da die anderen Ordner Bilder1, Bilder2, dann in den Haupt Ordner Bilder.

So, nun auch das Problem gelöst:
https://www.niederastroth.de/m4stober/

So langsam bekomme ich Durst

Hier der geänderte Java Script Teil, nur den ersetzen und natürlich die Pfade pro Block anpassen !!

Code: Alles auswählen

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

  // 🔹 Einzigartige ID je Galerie
  const galleryId = 'gallery-' + Math.random().toString(36).substr(2, 9);
  section.dataset.galleryId = galleryId;

  let imageFolder = section.dataset.folder || 'galerien/Test/';
  if (imageFolder && !imageFolder.endsWith('/')) imageFolder += '/';
  if (!imageFolder.startsWith('http') && !imageFolder.startsWith('/')) {
    imageFolder = location.origin + '/' + imageFolder;
  }

  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');

  let galleryImages = [];
  let currentSlide = 0;

  // 🔸 Lightbox sichtbar/nicht sichtbar (pro Instanz)
  function openGallery(index) {
    if (!galleryImages.length) return;
    currentSlide = index;
    lightbox.dataset.activeGallery = galleryId;
    lightbox.style.display = 'block';
    showSlide(currentSlide);
  }

  function closeGallery() {
    lightbox.style.display = 'none';
    delete lightbox.dataset.activeGallery;
  }

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

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

  // 🔸 Tastatursteuerung nur für aktive Lightbox
  document.addEventListener('keydown', e => {
    const active = document.querySelector('.lightbox[data-active-gallery]');
    if (!active || active.dataset.activeGallery !== galleryId) return;

    if (e.key === 'Escape') closeGallery();
    if (e.key === 'ArrowLeft') changeSlide(-1);
    if (e.key === 'ArrowRight') changeSlide(1);
  });

  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));

  // 🔹 Galerie-Bilder laden (serverseitig)
  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);

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

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

  loadGalleryImages();
})();
</script>

PS: Die Fehlermeldung beim Veröffentlichen kommt, wenn man auf der Arbeitsfläche kein Bild einfügt. Das würde ich sogar empfehlen. Oder aber du machst da das 1.Bild der Slideshow rein, was ja Sinn macht

Wenn Du da ein Platzhalter Bild rein machst, sieht man das kurz beim Reload der Seite (wie jetzt bei mir)

Hast Du irgendwo einen "Buy me a Coffee-Link" ?

www.fallprotectionengineering.eu/Produktbilder

Kann man schon sehen

======
Du, das js wird erst gar nicht ausgeführt.
Wenn keine Bilder kommen, dann ist der Pfad falsch.
Aber es passiert ja nichts.
==========
Ich muss mal eben unterbrechen an dieser Stelle. Da scheint ein übler Fehler in der 6.1.7 zu sein mit der Verlinkung von Menüpunkten

Das Javascript und der Block laufen 100% richtig !

https://www.niederastroth.de/m4stober/

Oder was ist das hier ?

Meinen Spenden Button findest Du hier oben im Menü rechts :https://www.niederastroth.de/formgenerator/

bei Unterstützen

Ja ja, auf Deiner Seite läuft das, hier nicht: https://www.fallprotectionengineering.e ... ipment.php

Und die Parameter stehen oben in der Section drin - was dann nicht ginge, wenn ich verschiedene Galerien in einem Tab habe.

Fehler gefunden

Auf Der Seite laufen jede Menge anderer Scripte :

Probier mal den Code hier :

HTML

Code: Alles auswählen

<section data-bs-version="5.1" class="content-gallery" group="Content"
  data-padding-top="8" data-padding-bottom="6" data-bg-color="#ffcf00"
  data-main-image="galerien/Test/bild1.jpg" data-show-thumbs="true"
  data-main-image-size="medium" data-title="Meine Slideshow mit Text"
  data-text="Klicke auf das Bild, um die Diashow zu öffnen."
  data-folder="galerien/Test/">

  <div class="container gallery-container">
    <div class="row align-items-center">
      <div class="col-md-6 text-center">
        <div class="gallery-preview">
          <img src="galerien/Test/bild1.jpg" alt="Hauptbild"
            class="img-fluid gallery-thumb main-preview main-medium">
          <div class="gallery-thumbs mt-3"></div>
        </div>
      </div>

      <div class="col-md-6">
        <h3 class="mbr-section-title mbr-fonts-style mb-4 display-5">
          Meine Slideshow mit Text
        </h3>
        <p class="mbr-text mbr-fonts-style display-7">
          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>

  <!-- ✅ Sicheres Script -->
  <script data-cookiecategory="necessary">
    (function() {
      try {
        const currentScript = document.currentScript;
        const section = currentScript.closest('.content-gallery');
        if (!section) return;

        // --- Parameter
        const paddingTop = section.dataset.paddingTop || 5;
        const paddingBottom = section.dataset.paddingBottom || 5;
        const bgColor = section.dataset.bgColor || '#ffffff';
        let imageFolder = section.dataset.folder || 'galerien/Test/';
        const showThumbs = section.dataset.showThumbs === 'true';
        const mainImageSize = section.dataset.mainImageSize || 'medium';
        const mainImageSrc = section.dataset.mainImage || '';
        const titleText = section.dataset.title || '';
        const descText = section.dataset.text || '';

        // --- Sicherheit: fetch-URL nur relativ oder erlaubt
        if (imageFolder && !imageFolder.endsWith('/')) imageFolder += '/';
        if (!imageFolder.startsWith('http') && !imageFolder.startsWith('/')) {
          const base = location.origin.replace(/\/$/, '');
          imageFolder = base + '/' + imageFolder;
        }

        // --- Layout
        section.style.paddingTop = paddingTop + 'rem';
        section.style.paddingBottom = paddingBottom + 'rem';
        section.style.backgroundColor = bgColor;

        const mainPreview = section.querySelector('.main-preview');
        const thumbsContainer = section.querySelector('.gallery-thumbs');
        const titleEl = section.querySelector('.mbr-section-title');
        const textEl = section.querySelector('.mbr-text');

        if (mainPreview) {
          mainPreview.src = mainImageSrc;
          mainPreview.classList.remove('main-small', 'main-medium', 'main-large');
          mainPreview.classList.add('main-' + mainImageSize);
        }
        if (titleEl) titleEl.textContent = titleText;
        if (textEl) textEl.textContent = descText;
        if (!showThumbs && thumbsContainer) thumbsContainer.style.display = 'none';

        // --- Lightbox Setup
        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');

        let galleryImages = [];
        let currentSlide = 0;

        // --- Sichere Fetch-Funktion (resistent gegen Cookieblocker)
        async function loadGalleryImages() {
          try {
            const response = await fetch(imageFolder, { mode: 'cors' });
            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);

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

            if (galleryImages.length && mainPreview) {
              mainPreview.src = galleryImages[0];
            }
          } catch (e) {
            console.warn('Fehler beim Laden der Galerie:', e);
          }
        }

        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]; }

        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);
        });

        loadGalleryImages();
      } catch (err) {
        console.error('Galeriefehler:', err);
      }
    })();
  </script>
</section>

Dein Block behält das automatische Laden via fetch()

Keine Kollision mehr mit Analytics (type="text/plain")

Keine JS-Fehler, auch wenn andere Skripte blockiert sind

Funktioniert in Mobirise 4 und 5

DSGVO-kompatibel markiert (läuft als „notwendig“)

Wenn das auch nicht klappt,
musst Du deinem Consent Manager eben sagen das diese Java Script OK ist und ausgeführt werden darf.

Alternative gefunden Frank

Ich habe den Block image05 photom4_image05 so geändert das nur ein Bild angezeigt wird und der rest erst bei Klick.

Vorteil: Kein Java Script, ist der original M4 Block - man kann also Bilder in Mobirie einfügen wie bisher.
Wird nur das original Java von Mobirise genutzt so wie bei der original Galerie auch. Man kann da ja so viele Bilder rein hauen wie man will. Hab es beim unteren Bild mal mit 10 Bildern gemacht anstatt 8.

HTM Teil:

Code: Alles auswählen

<section data-bs-version="5.1" class="mbr-gallery mbr-slider-carousel image05 photom4_image05" group="Images & Videos" plugins="mobirise-icons2, Masonry,BootstrapCarouselSwipe,Gallery,VimeoPlayer,SliderVideo">

    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->

        <input type="range" title="Top" name="paddingTop" min="0" max="9" step="1" value="1" inline>
        <input type="range" title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="1" inline>
        <input type="color" title="Overlay Color" name="overlayColor" value="#000000">
        <input type="checkbox" title="Gradient Overlay" name="gradOverlay">
        <input type="color" title="Overlay Color 2" name="overlayColor2" value="#45505b" condition="gradOverlay">
        <input type="range" title="Overlay Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.4" inline>
        <input type="color" title="Background Color" name="bgColor" value="#ffffff">

        <input type="gallery" title="Gallery" name="gallery">
        <!-- End block parameters -->
    </mbr-parameters>

    <div class="container-fluid">
        <div mbr-gallery="gallery" mbr-gallery-spacing="1"></div>
    </div>

</section>

css:

Code: Alles auswählen

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;
overflow: hidden;
box-sizing: border-box;
.mbr-slider .carousel-control {
  background: #1b1b1b;
}
.mbr-slider .carousel-control-prev {
  left: 0;
  margin-left: 2.5rem;
}
@media (max-width: 767px) {
  .container-fluid {
    padding: 0.5rem;
  }
}
@media (min-width: 767px) {
  .container-fluid {
    padding: 0 2rem;
  }
}
@media (min-width: 992px) {
  .container-fluid {
    padding: 0 1.7rem;
  }
}
.mbr-slider .carousel-control-next {
  right: 0;
  margin-right: 2.5rem;
}
.mbr-gallery-item > div:hover:before {
  z-index: 5;
}
.mbr-gallery-item > div:hover {
  .icon-focus {
    opacity: 0.8 !important;
  }
  .mbr-gallery-title::before {
    background: transparent !important;
  }
  &:before {
    opacity: @overlayOpacity !important;
  }
}
.mbr-gallery-item {
  &:hover {
    img {
      transform: scale(1.1);
    }
  }
}
.icon-focus {
  font-family: 'Moririse2' !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 50px;
  background: white;
  border-radius: 6px;
  &:before {
    content: '\e970';
    font-size: 1.2rem;
    color: black;
  }
}
.mbr-slider .modal-body .close {
  background: #1b1b1b;
}
.mbr-gallery-item > div {
  overflow: hidden;
}
.mbr-gallery-item img {
  transition: all 2s !important;
}
.mbr-gallery-item > div::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: @overlayColor;
  opacity: 0;
  -webkit-transition: 0.2s opacity ease-in-out;
  transition: 0.2s opacity ease-in-out;
  & when (@gradOverlay) {
    background: linear-gradient(to left, @overlayColor, @overlayColor2) !important;
  }
}
.mbr-gallery-title {
  font-size: 0.9em;
  position: absolute;
  display: block;
  width: 100%;
  bottom: 0;
  padding: 1rem;
  color: #fff;
  z-index: 5;
  &:before {
    content: ' ';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    background: @overlayColor !important;
    opacity: @overlayOpacity;
    -webkit-transition: 0.2s background ease-in-out;
    transition: 0.2s background ease-in-out;
    & when (@gradOverlay) {
      background: linear-gradient(to left, @overlayColor, @overlayColor2) !important;
    }
  }
}
.mbr-gallery-item:not(:first-child) {
  display: none !important;
}
.mbr-gallery-item:first-child {
  width: 50% !important;
  max-width: 600px;
}
[mbr-gallery="gallery"] {
  display: flex;
  justify-content: center;
}
.modal .mbr-gallery-item, .carousel-inner .mbr-gallery-item {
  display: block !important;
}

Teste das mal
https://www.niederastroth.de/m4stober/

PS: Ich glaube das ist die endgültige Lösung für Dein Problem

Habe fertig

Tja Volker,
und da haben wir wieder das Problem, dass ich 6 Galerien für einen Block brauche.
Es ist nicht das passende Problem für Deine Lösung.

Du, haken wir das ab als "nicht so einfach wie gedacht" .
Habe dem zweiten Mitarbeiter an dem Projekt inzwischen gezeigt, wie man in den externen php-Dateien die Bildliste ergänzt.
Der DAU, von dem ich im Mobi-Forum sprach, hat sich nie wieder gemeldet. So scheint auch das im Sande zu verlaufen.

Erklär mir mal bitte warum 6 galerien in einen Block müssen und man nicht 6 Blöcke untereinander nehmen kann

Ich hatte Dir das doch schon ein paar Mal genannt?!
https://www.fallprotectionengineering.e ... ipment.php

Du siehst hier ein Tab mit "Liste unserer Produkte"
So ist das vom Kunden gewünscht und so soll es auch bleiben, weil übersichtlich.

Mobirise-Tutorials.com

Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise

Re: Blöcke für Mobirise