Mobirise-Tutorials.com

Ich erweitere mal mein Portfolio

Ab sofort gibts auch Blöcke für Mobirise. Wer einmal den Trick raus hat kann Blöcke nach eigner Idee und Anspruch basteln

Hier mal ein Block der 2 Bilder enthält, die in der Größe Skalierbar sind. Mit Bild Titel und Subtext. EIn Text steht entweder mittig zwischen den Bildern oder links oder rechts daneben. Frei wählbar natürlich.

Erstellungs Dauer - 20 Minuten

Code HTML

Code: Alles auswählen

 <section data-bs-version="5.1" class="freestyle-gallery mbr-section" group="Gallery" id="gallery-freestyle-06" style="background-color: {{bgColor}}; padding-top: calc({{paddingTop}} * 1rem); padding-bottom: calc({{paddingBottom}} * 1rem);">

  <!-- ⚙️ Mobirise Zahnrad-Parameter -->
  <mbr-parameters>
    <header>Layout</header>
    <input type="checkbox" title="Full Width" name="fullWidth">
    <input type="range" inline title="Padding Top" name="paddingTop" min="0" max="10" step="1" value="10">
    <input type="range" inline title="Padding Bottom" name="paddingBottom" min="0" max="10" step="1" value="4">

    <header>Hintergrund</header>
    <input type="color" title="Farbe" name="bgColor" value="#163300">

    <header>Bilder</header>
    <input type="range" title="Bildgröße (Zoom)" name="imgScale" min="80" max="120" step="1" value="88">

    <header>Anzeige</header>
    <input type="checkbox" title="Titel anzeigen" name="showTitle" checked>
    <input type="checkbox" title="Untertitel anzeigen" name="showSubtitle" checked>
    <input type="checkbox" title="Bildtexte anzeigen" name="showCaptions" checked>
  </mbr-parameters>

  <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
    <!-- Titel -->
    <div class="row mb-4 text-center">
      <div class="col-12">
        <h2 class="mbr-section-title mbr-fonts-style display-5" mbr-if="showTitle">Meine Galerie</h2>

        <p class="mbr-section-subtitle mbr-fonts-style display-7 mb-0" mbr-if="showSubtitle">
          Steuere die Bildgröße über das Zahnrad-Menü.
        </p>
      </div>
    </div>

    <!-- Galerie -->
    <div class="row g-3 justify-content-center">
      <!-- Item -->
      <div class="item features-image col-12 col-md-6 col-lg-4 active">
        <div class="item-wrapper">
          <div class="item-img" style="transform: scale({{imgScale}}%);">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x423.jpg" alt="Bild 2" data-slide-to="0" data-bs-slide-to="0">
          </div>
          <div class="item-content" mbr-if="showCaptions">
            <h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Bildtitel 2</h5>
            <p class="mbr-text mbr-fonts-style display-7">Beliebiger Text oder Beschreibung hier.</p>
          </div>
        </div>
      </div><div class="item features-image col-12 col-md-6 col-lg-4">
        <div class="item-wrapper">
          <div class="item-img" style="transform: scale({{imgScale}}%);">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x423.jpg" alt="Bild 1" data-slide-to="1" data-bs-slide-to="1">
          </div>
          <div class="item-content" mbr-if="showCaptions">
            <h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Bildtitel 1</h5>
            <p class="mbr-text mbr-fonts-style display-7">Beschreibung oder Text zu diesem Bild.</p>
          </div>
        </div>
      </div><div class="item features-image col-12 col-md-6 col-lg-4">
        <div class="item-wrapper text-only">
          <div class="item-content">
            <h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Textkarte</h5>
            <p class="mbr-text mbr-fonts-style display-7">Hier steht der Text dsfdfsdfdf fdsfdsfsdfdfdsffdf d df&nbsp; df <br>&nbsp;dfdf df<br>&nbsp;df df df df d<br>&nbsp;d dfsd dffddfdfd fd <br>fd fd <br>dsdsd</p>
          </div>
        </div>
      </div>

      <!-- Item -->
      

      <!-- Textkarte -->
      
    </div>
  </div>
</section>

Code CSS:

Code: Alles auswählen

.freestyle-gallery {
  transition: background-color 0.3s ease;
}
.freestyle-gallery .item-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.freestyle-gallery .item-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.freestyle-gallery .item-img {
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}
.freestyle-gallery .item-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform .3s ease;
}
.freestyle-gallery .item-wrapper:hover .item-img img {
  transform: scale(1.05);
}
.freestyle-gallery .item-content {
  padding: 1rem 1.25rem 1.25rem;
}
.freestyle-gallery .text-only {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  background: #f8f9fa;
}
@media (max-width: 767px) {
  .freestyle-gallery {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}
P {
  text-align: center;
  color: #ffffff;
}
H5 {
  text-align: center;
  color: #9fe870;
}

Wünsche ???

Wünsche?
Immer!
Aber vorsicht, wenn ich was wünsche, dann nix, was ich selbst aus dem Ärmel schüttel

https://www.fallprotectionengineering.e ... ipment.php
Hier der "Liste unserer Produkte"
Es wird eine Slideshow mit dem Klick auf ein Bild gestartet.

Mach ich bisher mit Coding, arbeite aber momentan mit einer zweiten Person an dem Projekt, der keinen Code mag.

Basiert auf der Ecco-Lightbox (ich habe die alte Version 5.3)

Code: Alles auswählen

 <script type="text/plain" data-src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js">
</script>

<script type="text/plain">
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox();
            });
</script>

und jetzt ?

willst du das als block ? verstehe gerade nicht was du möchtest

Ja ja, einen Block, wo ich eine Galerie konfigurieren kann, die dann durch Klick auf ein Bild gestartet werden kann.

Du, das war jetzt aber eher als Witz gemeint.
Das ist wirklich keine Sache, die man mal eben macht und außerdem gibt es für die Allgemeinheit sehr wenig Anwendungsfälle. Die Verwaltung von Galerien und Javascript in Mobi ist jetzt nicht trivial.

schon fertig Frank

https://www.niederastroth.de/blogblock/

Da muss schon was aufwendigeres kommen

Oh, ich bin gerade beeindruckt.
Da ich das Ding in einem Kundenprojekt einsetzen will, würde ich Dir dafür auch gerne mehr als einen Coffee zukommen lassen. Deine Paypal-Adresse?
Haben wir es inzwischen eigentlich raus, einzelne Blöcke zu verschicken, die dann auch eingelesen werden können über Mobirise oder die Witsec-Gallery? Das es geht, ist ja klar, aber wie?
Bisher habe ich dass, wenn es mal notwendig war, immer ein einem kompletten Projekt gemacht - aber dann haben wir ja 90% "Kram" dabei.

Muss gleich leider zu Arbeit

Kann heute Abend erst wieder

Frank,

kopier das einfach in einen block:

Geändert auf unbegrenzte Bilder aus Ordner / 13.10.25 20:30 Uhr

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'}">
  
  <mbr-parameters>
    <header>Abstände</header>
    <input type="range" inline title="Abstand oben" name="paddingTop" min="0" max="10" step="1" value="6">
    <input type="range" inline title="Abstand unten" name="paddingBottom" min="0" max="10" step="1" value="6">

    <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>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. Alle Bilder liegen im Ordner assets/gallery/.</textarea>
  </mbr-parameters>

  <div class="container">
    <div class="row align-items-center">
      <!-- Linke Spalte -->
      <div class="col-md-6">
        <div class="gallery-preview">
          <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-816x490.jpg" alt="Hauptbild" class="img-fluid gallery-thumb" id="mainPreview" onclick="openGallery(0)">
          <div class="gallery-thumbs mt-3" mbr-class="{'d-none': !showThumbs}" id="galleryThumbs"></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">Test mit beliebig vielen Bildern</h3>
        <p class="mbr-text mbr-fonts-style" mbr-theme-style="display-7">Neue Version ! Unbegrenzt Bilder möglich.<br>Diese liegen alle in einem Ordner und sollten wenn Sie in einer<br>speziellen Reihenfolge erscheinen sollen nummerisch benannt sein. Also Bild1.jpg, Bild2.jpg usw</p>
      </div>
    </div>
  </div>

  <!-- Lightbox -->
  <div id="lightbox-gallery" class="lightbox">
    <span class="close" onclick="closeGallery()">×</span>
    <div class="lightbox-content">
      <img class="lightbox-image" id="lightbox-image" src alt>
      <a class="prev" onclick="changeSlide(-1)">❮</a>
      <a class="next" onclick="changeSlide(1)">❯</a>
    </div>
  </div>

  <script>
    let galleryImages = [];
    let currentSlide = 0;

    // Lädt automatisch alle Bilder aus assets/gallery/
    async function loadGalleryImages() {
      try {
        const response = await fetch('assets/gallery/');
        const text = await response.text();
        const parser = new DOMParser();
        const htmlDoc = parser.parseFromString(text, 'text/html');
        const links = htmlDoc.querySelectorAll('a');
        galleryImages = [];

        links.forEach(link => {
          const href = link.getAttribute('href');
          if (href && href.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
            galleryImages.push('assets/gallery/' + href);
          }
        });

        // Thumbnails anzeigen
        const thumbsContainer = document.getElementById('galleryThumbs');
        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.onclick = () => openGallery(i);
          thumbsContainer.appendChild(thumb);
        });

        // Falls kein Bild, Fallback
        if (!galleryImages.length) {
          galleryImages.push("assets/images/sample1.jpg");
        }

      } catch (e) {
        console.error("Konnte Galerie nicht laden:", e);
        // Fallback für lokale Vorschau (Mobirise Preview)
        galleryImages = ["assets/images/sample1.jpg"];
      }
    }

    function openGallery(index) {
      if (!galleryImages.length) return;
      currentSlide = index;
      document.getElementById("lightbox-gallery").style.display = "block";
      showSlide(currentSlide);
    }

    function closeGallery() {
      document.getElementById("lightbox-gallery").style.display = "none";
    }

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

    function showSlide(n) {
      const img = document.getElementById("lightbox-image");
      img.src = galleryImages[n];
    }

    document.addEventListener("DOMContentLoaded", loadGalleryImages);
  </script>
</section>

CSS Teil:

Code: Alles auswählen

.content-gallery {
  position: relative;
}
.gallery-thumb {
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.3s ease;
}
.gallery-thumb:hover {
  transform: scale(1.03);
}
.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.gallery-thumb-small {
  width: 22%;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.gallery-thumb-small:hover {
  transform: scale(1.05);
  opacity: 0.8;
}
.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;
  max-width: 80%;
  text-align: center;
}
.lightbox-image {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
}
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}
.close:hover {
  color: #bbb;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 40px;
  transition: color 0.3s ease;
  user-select: none;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
.prev:hover, .next:hover {
  color: #bbb;
}

viel Spaß damit

Hallo Volker,
habe gerade mal versucht, Deinen Block einzubauen.
Ich kann zwar Bilder auswählen, aber in der Slideshow werden die angezeigt, die Du bereits eingetragen hast.
In meinem Beispiel habe ich Bootstrap 4, was allerdings wohl kein Problem ist.
Ich sehe Folgendes nun im Code - meine eingetragenen Dateien

Code: Alles auswählen

 <header>Galerie-Einstellungen</header>
    <input type="image" title="Bild 1 (Hauptbild)" name="image1" value="file:///D:/InternetProjekte/fallprotection/assets/images/training-3.jpeg">
    <input type="image" title="Bild 2" name="image2" value="file:///D:/InternetProjekte/fallprotection/assets/images/social.jpg">
    <input type="image" title="Bild 3" name="image3" value="file:///D:/InternetProjekte/fallprotection/assets/images/popup-1.jpg">
    <input type="image" title="Bild 4" name="image4" value="file:///D:/InternetProjekte/fallprotection/assets/images/social.jpg">
    <input type="image" title="Bild 5" name="image5" value="file:///D:/InternetProjekte/fallprotection/assets/images/social.jpg">
    <input type="checkbox" title="Thumbnails anzeigen" name="showThumbs">

Aber im HTML dann Deine Dateien

Code: Alles auswählen

div class="gallery-preview">
          <img src="file:///D:/InternetProjekte/fallprotection/assets/images/trainthetrainer-1000.jpg" alt="Bild 1" class="img-fluid gallery-thumb" onclick="openGallery(0)">
          <!-- Thumbs werden nur versteckt, nicht entfernt -> Lightbox kann sie nutzen -->
          <div class="gallery-thumbs mt-3" mbr-class="{'d-none': !showThumbs}">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-768x543.jpg" alt="Bild 2" class="img-fluid gallery-thumb-small" onclick="openGallery(1)">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x423.jpg" alt="Bild 3" class="img-fluid gallery-thumb-small" onclick="openGallery(2)">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/gemini-generated-image-a0110ma0110ma011-144x79.png" alt="Bild 4" class="img-fluid gallery-thumb-small" onclick="openGallery(3)">
            <img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x401.jpg" alt="Bild 5" class="img-fluid gallery-thumb-small" onclick="openGallery(4)">
          </div>
        </div>

Hier sollte doch eine Referenz auf die Bildadresse aus Input stehen, nicht Deine Dateien.
Dann wäre es natürlich wichtig, die Zahl der Bilder einstellen zu können.
Oder besser noch sowas, wie die Bilder in den Mobirise Galerien eingelesen werden, also die alte Version mit der Auswahl im Tool-Fenster würde da reichen.

Ich habe in meinem Beispiel ein Tab, wo in jedem Tab mehrere Galerien sind. Es geht also schon um eine recht große Zahl an Bildern.

Du wolltest doch eine schwierige Aufgabe

Hallo Frank,

unten siehst du die Thumbnail-Galerie.

Erweitern kannst Du die Bildanzahl so:

Code: Alles auswählen

<input type="image" title="Bild 6" name="image6" value="assets/images/sample6.jpg">
<input type="image" title="Bild 7" name="image7" value="assets/images/sample7.jpg">
<input type="image" title="Bild 8" name="image8" value="assets/images/sample8.jpg">
<input type="image" title="Bild 9" name="image9" value="assets/images/sample9.jpg">
<input type="image" title="Bild 10" name="image10" value="assets/images/sample10.jpg">

Dann noch die Thumbnail-Galerie erweitern:

Code: Alles auswählen

<img src="{{ image6 }}" alt="Bild 6" class="img-fluid gallery-thumb-small" onclick="openGallery(5)">
<img src="{{ image7 }}" alt="Bild 7" class="img-fluid gallery-thumb-small" onclick="openGallery(6)">
<img src="{{ image8 }}" alt="Bild 8" class="img-fluid gallery-thumb-small" onclick="openGallery(7)">
<img src="{{ image9 }}" alt="Bild 9" class="img-fluid gallery-thumb-small" onclick="openGallery(8)">
<img src="{{ image10 }}" alt="Bild 10" class="img-fluid gallery-thumb-small" onclick="openGallery(9)">

Lade bitte Deine Bilder direkt auf der Arbeitsfläche per Mobirise Import ein, nicht am Zahnrad. DAs Funktioniert auf jeden Fall.Also Hauptbild und Vorschaubilder da importieren, dann Schalter aus und es sollte gehen. Wenn nicht, melden.

Dann muss der Partner ja wieder im Code arbeiten, so ist das ja kein Unterschied zu dem, was ich habe.

wieviel Bilder ?
20 30 100 ?

Ich habe es jetzt geändert.

Lösung: Alle Bilder die angezeigt werden sollen kommen in den Ordner /asstets/gallery
Dieser Ordner muss das Datei Listing aktiv haben. Dazu eine .htaccess rein mit dem Inhalt:

Code: Alles auswählen

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

Jetzt werden ALLE Bilder dieses Ordners angezeigt - Fertig

PS: Ich hab da mal ein paar Autos von mir reingehauen

https://www.niederastroth.de/blogblock/

Ich habe hier gerade 74 Bilder.

Ah ja, das ist doch erheblich besser.
Werde morgen mal einbauen.
Gehts noch, die Bilder außerhalb von assets zu halten?
Die werden ja nicht mit Mobi hochgespielt, oder?

Dann musst du das hier ändern :

const response = await fetch('assets/gallery/');

Aber denk dran Mobirise erwartet die Bilder in assets ordern, musst du testen

Inspiriert durch Franks Wunsch nach mehr Bildern hab ich direkt mal was nettes neues gebastelt

Eine Bildergalerie, die einfach Bilder aus Ordnern einliest und diese als Vorschau anzeigt, natürlich in der Blockauswahl einstellbar Vorschau Größe, Bilder pro Seite und Bilder pro Reihe.

Es gibt bei mir zur Zeit 2 Ordner : Bilder1 und Bilder2 Die Buttons generieren also automatisch den Ordner Namen.
und noch den Ordner Testbilder eben gemacht
Schaut selber

https://www.niederastroth.de/blogblock/

Ich find es genial - eine Galerie ohne PHP, Datenbank und Schnick Schnack.

Einfach Bilder in die jeweiligen Ordner hoch laden - Rest macht der Mobirise Block

Auch hier gilt, das es eine .htaccess datei geben muss die das Auslesen des Verzeichnisses möglich macht.

Code: Alles auswählen

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

Wie jetzt Frank ?

Kannst es nicht brauchen ? Ich habe die Bilder auch mal in anderen Ordnern getestet - geht auch, werden eingelesen.

Das ist doch das was Du wolltest : https://www.niederastroth.de/bildklick.html

Für ganz Faule ( doofe) hab ich jetzt auch noch ein Upload Script eingebaut:
Mit Löschfunkton und Vorschau

https://www.niederastroth.de/upload_galerien.php

Passwort: volker04

Noch simpler als Block in Mobirise ( ganz unten auf der Seite zu sehen und testen )
Bilder einfach in Mobirise hochladen...

https://www.niederastroth.de/tagesschau/

Mobirise-Tutorials.com

Blöcke für Mobirise

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