Lightbox für einzelne Bilder?

[Tommy Herrmann]

ja - ich setze halt den Lightbox-Link immer als absolute URL, denn Mobirise "weiß" ja von diesem Bild überhaupt nichts:

https://www.mobirise-tutorials.com/News ... stallation

<a href="https://www.mobirise-tutorials.com/News ... lendar.jpg" data-lightbox="image-block" data-title="Anforderungen"><img src="file:///C:/Users/Thoma/Documents/Mobirise/News-PHPJabbers/assets/images/1-requires.jpg" alt="Installation"></a>

Code: Alles auswählen

<div class="item-wrapper">
    <div class="item-img">
        <a href="https://www.mobirise-tutorials.com/News-PHPJabbers/images/calendar/1-calendar.jpg" data-lightbox="image-block" data-title="Anforderungen"><img src="file:///C:/Users/Thoma/Documents/Mobirise/News-PHPJabbers/assets/images/1-requires.jpg" alt="Installation"></a>
    </div>
    <div class="item-content" mbr-if="showCardTitle || showCardSubtitle || showText || showButtons">
        <h5 class="item-title mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".item-title" mbr-if="showCardTitle">
            <b>Anforderungen</b></h5>
        <h6 class="item-subtitle mbr-fonts-style mt-1" mbr-theme-style="display-7" data-app-selector=".item-subtitle" mbr-if="showCardSubtitle">
            <i>Card Subtitle</i>
        </h6>
        <p class="mbr-text mbr-fonts-style mt-3" mbr-if="showText" mbr-theme-style="display-7" data-app-selector=".mbr-text, .mbr-section-btn">Klicke auf das Bild</p>
    </div>
    <div class="mbr-section-btn item-footer mt-2" mbr-if="showButtons" data-toolbar="-mbrBtnMove,-mbrBtnAdd" mbr-buttons mbr-theme-style="display-7">
        <a href class="btn btn-primary item-btn" target="_blank" data-app-placeholder="Type Text">Learn
            more</a>
    </div>
</div>

[stobi_de]

Ich habe das jetzt mal überall mit einer Mobi-Bilderliste gebaut.
Solange man nicht "optimize images" eingeschaltet hat, klappt das ganz gut. Sonst wird ja die Bildgröße ggf. verkleinert und das Lightbox-Bild sieht unscharf aus.
Im Code muss man trotzdem was ändern, kann aber einfach via Copy-Paste die Bildadresse nach 2 Zeilen höher in den Link kopieren.
Das sieht dann im Endeffekt so aus

Code: Alles auswählen

<div class="item-wrapper">
 <a href="file:///D:/InternetProjekte/Comfortherm/assets/images/heizkreisplanung.jpg" data-lightbox="planung">
  <div class="item-img">
    <img src="file:///D:/InternetProjekte/Comfortherm/assets/images/heizkreisplanung.jpg" alt="" data-slide-to="2" data-bs-slide-to="2">
  </div>
 </a>
</div>

Die grundsätzliche Ergänzung des Lightbox-Names muss natürlich so erfolgen, wie von Dir beschrieben.
Dieses Vorgehen hat den Vorteil, dass die Bilder in der Mobi-Oberfläche ausgewählt werden können und dass sie in den Assets verwaltet werden, also kein manuelles Hochladen mehr erfolgen muss.

[Tommy Herrmann]

Moin,

ja - solange Mobirise das Bild bereits kennt, es also über Mobirise eingelesen wurde, kann es auch ein relativer Link zum Lightbox-Bild sein.

Ich halte diese Bilder dennoch immer separat mit absoluter URL und benenne sie auch meist anders, wie

01-news.jpg
02-news.jpg
03-news.jpg

usw.

Ich habe hierfür diese Mobirise-Galerie aus dem Standard-Thema "Mobirise5" verwendet:

so erstelle ich mir bereits vorab meine Reihenfolge der Bilder für die Lightbox und kopiere diese in einen extra Ordner. Dann kann ich diesen auch eine andere oder gar einheitliche Größe verpassen.

Ich habe dann so einen 4er Bild-Block als User-Block abgespeichert:

Kann diesen dann als "Vorlage" in jedes Projekt einfügen, klicke auf das Thumbnail und ändere es über den Bild-Editor von Mobirise (ganz normal), dann ändere ich auch gleich den bereits gesetzten Link von meinetwegen 01-news.jpg in 01-blume.jpg.

Alle Lightbox-Attribute bleiben dabei am Link erhalten.

Benötige ich nun 8 Bilder als Gruppe oder 24 oder was auch immer, ziehe ich eben den Block mehrmals auf. Solange die Bilder den gleichen Gruppen-Namen der Lightbox erhalten, werden dann ja alle in der Lightbox dargestellt, egal aus wie vielen Blöcken und egal, wo sich diese Blöcke auf der Seite befinden.