Lightbox für einzelne Bilder?

Hallo Tommy!
hast Du irgendwas in deinem Fundus zur Anzeige von einzelnen Bildern in einer Lightbox?
Ich nutze dazu ja normalerweise Ekko-Lightbox, aber das scheint nicht zu funktionieren, wenn auf der gleichen Seite auch Mobi-Galerien sind.

Frank

Moin,

ja - ich hatte mir da die ursprüngliche und nun ganz neue "Lightbox 2" vom 21.02.2023 von Lokesh Dhakar - das ist der Entwickler der ursprünglichen und originalen Lightbox, von der sich alle anderen Lightboxen (auch die "Visual Lightbox" von Mobirise) abgeleitet haben - ausgeguckt.

Die hat tolle Optionen und ist blitzschnell. Man kann die Bilder einzeln und auch in definierten Gruppen in der Lightbox darstellen.

Hier habe ich diese in mehreren Variationen auf einer meiner Seiten eingebaut und auch mein Tutorial für Mobirise dazu geschrieben:

https://www.mobirise-tutorials.com/Tuto ... llery.html

Hier geht es zur Original-Seite:

https://lokeshdhakar.com/projects/lightbox2/

... und hier zum Download auf GitHub:

https://github.com/lokesh/lightbox2

Danke, werde gleich testen!

Die Lightbox muss aber die jQuery haben - also unten ran bappen ...

Vielen Dank, funzt!

https://www.terra-system.de/projekte-bodengutachten.php
Oben der Wasserspielplatz

Moin,

... ich finde diese Lightbox (die Originale) sowieso die allerbeste Lightbox.

Wenn man sich damit etwas beschäftigt hat, baut sie sich auch sehr einfach ein.

Du kannst der class="lb-caption" (Beschriftung) auch noch Deinen Font, usw. verpassen.

Hm....
Also

Code: Alles auswählen

.lb-caption {
  font-family: 'Arial';
}

Hat da keine Auswirkung, ich sehe es nichtmals im Debugger

... muss ich mal gucken. Weiß nicht mehr auswendig, wie ich es gemacht hatte.

Versuche es mal mit der class="lb-details":

Code: Alles auswählen

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
  font-family: 'Arial';
}

Es scheint so, als ob die Klasse aus dem Javascript erzeugt wird und alles überschreibt-
Ich hatte auch eben mal mit Important in der lb-caption versucht, es erscheint gar nicht.
Vermutlich ist es irgendwo ein Parameter in der lightbox.

Im Debugger gehts auch hier

Code: Alles auswählen

.lightbox {
    width: 100%;
    z-index: 10000;
    font-weight: 400;
    outline: 0;
    font-family: 'OPEN SANS';
}

Ah moment, falscher Gültigkeitsbereich für die CSS.

Ja, muss in die global styles

ja - ich habe das eben nochmals ausprobiert:

https://www.mobirise-tutorials.com/Tuto ... llery.html

Ich habe z.B. jetzt mal die Größe von der Bild-Anzahl geändert und fett gemacht:

Code: Alles auswählen

  <style>
    .lb-outerContainer {
      background-color: #000;
    }
    .lb-data .lb-number {
      font-size: 1rem;
      font-weight: bold;
    }
  </style>

Da muss meist die class="lb-data" auch mit angegeben werden und das muss in die Seiteneinstellungen in den Bereich "Inside <head> code:". In der Block-CSS geht es nicht.

in die global styles. Da geht alles

ja - das geht natürlich auch.

Ich schreibe so etwas aber meist lieber in eine eigene <style> Anweisung, schon um die Default-Datei von Mobirise möglichst nicht zu ändern und das muss ja auch nicht im ganzen Projekt geladen werden, denn das kostet ja auch unnötige Rechenzeit.

Hallo Thommy
hast Du eine Idee, wie ich die Bilder für die Lightbox mit der Mobi-Oberfläche zusammenstellen kann?
Ich habe da einen Kunden, der ständig andere Bilder will.
Nun behalte ich da seine Bildnamen bei und das ist viel blöde Schreibarbeit.

Mit fehlt da eine Idee für einen Automatismus, die Bildauswahl als Links zu setzen - Du verstehst schon, wie ich meine.

Moin,

nee - glaube nicht

Wie sollte man etwas automatisieren, was nicht Bestandteil des Programms ist. Ich denke der Einbau einer fremden Lightbox muss Handarbeit bleiben.

Ich habe dazu ja bereits mal einen ganz normalen Bilderblock von Mobirise verwendet, insofern ist das ja hier bereits kombiniert:

https://www.mobirise-tutorials.com/Tuto ... tbox-Block

Man trägt doch dann nur noch die Links zu den großen Bildern und das Lightbox-Attribut ein. Das geht doch recht fix. Das Konstrukt der Galerie ist doch das von Mobirise und man hat damit keine Arbeit mehr.

Man kann sogar die angezeigten Thumbs direkt über die Bildergalerie von Mobirise tauschen, nur eben die großen Bilder der Lightbox müssen dann wohl immer händisch getauscht werden. Ich verwende für die großen Lightbox-Bilder immer einen absoluten Link zu den zuvor auf den Server kopierten Bildern:

Code: Alles auswählen

<div class="item-wrapper">
    <div class="item-img">
        <a href="https://www.mobirise-tutorials.com/Tutorials/images/image-block/Bild01.jpg" data-lightbox="image-block" data-title="Bei Sonnenaufgang"><img src="file:///C:/Users/Thoma/Documents/Mobirise/Tutorials/assets/images/morgens-1.jpg" alt="Lightbox-Beispiel"></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>Bei Sonnenaufgang</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 oben auf das Bild für eine Bildergruppe oder <a href="https://www.mobirise-tutorials.com/Tutorials/images/image-block/Bild01.jpg" class="text-primary" data-lightbox="Bild01" data-title="Bei Sonnenaufgang">hier</a>&nbsp;für dieses individuelle Bild.<br></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>

Wobei ich bei den Bildern dieses Blocks immer über das Lightbox Attribut:

data-lightbox="image-block" ...

Tommys Tutorial-Seite hat geschrieben:
Auch hier wird einfach das <a> Tag mit dem großen Lightbox Bild und dem Attribut data-lightbox="Gruppenname" zum Aufruf der Lightbox um das vorhandene Bild von Mobirise gelegt:

<a href="https://www.mobirise-tutorials.com/Tuto ... Bild01.jpg" data-lightbox="image-block" data-title="Bei Sonnenaufgang">
<img src="file:///C:/Users/Thoma/Documents/Mobirise/Tutorials/assets/images/morgens-1.jpg" alt="Lightbox-Beispiel">
</a>

... das ich hier "image-block" benannt habe, die ganze Gruppe als Galerie anzeige - im Gegensatz dazu, zeige ich bei den Text-Links in meinem Beispiel immer nur das jeweilige Einzelbild. Inklusive dem Attribut am Link würde man auch die gesamte Gruppe anzeigen.

Ich wüsste jetzt keine Möglichkeit das in der Form weiter zu automatisieren.

https://www.comfortherm.de/fussbodenhei ... eglich.php

Da sind 4 Galerien unten bei "Estrich fräsen" etc...die jeweils durch 1 Bild gestartet werden.

Ich hatte irgendwie versucht, 4 einzelne Mobi-Galerien zu bauen mit den entsprechenden Parametern, die online dann auf display:none stehen.

Aber Holzweg

Moin,

hast Du denn noch Fragen dazu? Sieht doch alles perfekt aus ...

Ich habe gerade eben auch eine Mobirise-Galerie mit der "Lightbox 2" versehen:

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

Das sind in diesem Fall dann also 2 Mobirise Bilder-Blöcke untereinander (je 4 Bilder). Das kann man beliebig erweitern.

Nun ja, es geht mir nur um die "Usability" - was für ein wundervolles Wort

Ich habe jetzt mal hier
https://www.afripix.de/comfortherm/fuss ... eglich.php

bei dem Punkt "Estrich fräsen" habe ich eine Mobi-Galerie ins Spiel gebracht. Es ist nur so eine Pseudo-Mobi-Galerie ohne Lightbox.
Der Galerie-Block kann einfach irgendwo auf die Seite gesetzt werden.
Die Bilder werden also über die Mobi-Oberfläche ausgewählt und werden automatisch über die Assets hochgeladen. In dem anderen Beispiel waren die Bilder zu Fuß hochgeladen.

Was halt irgendwie nicht klappt, ist das dieses a href mit dem ausgewählten Bild gefüllt wird. Das muss man noch zu Fuß machen.
So das Original

Code: Alles auswählen

<div class="item-wrapper">
                    <a href="#">
                        <div class="item-img">
                            <img src="file:///C:/Users/stobi/AppData/Local/Mobirise.com/Mobirise/stober_0040afripix_002ede/addons/beautym5/components/_images/beauty/image12.jpg" alt="Mobirise Website Builder">
                        </div>
                    </a>
                </div>

So die Modifikation

Code: Alles auswählen

<div class="item-wrapper">
                    <a href="file:///C:/Users/stobi/AppData/Local/Mobirise.com/Mobirise/stober_0040afripix_002ede/addons/beautym5/components/_images/beauty/image12.jpg" data-lightbox="fraesen">
                        <div class="item-img">
                            <img src="file:///C:/Users/stobi/AppData/Local/Mobirise.com/Mobirise/stober_0040afripix_002ede/addons/beautym5/components/_images/beauty/image12.jpg" alt="Mobirise Website Builder">
                        </div>
                    </a>
                </div>

Mobirise-Tutorials.com

Lightbox für einzelne Bilder?

Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Re: Lightbox für einzelne Bilder?

Wer ist online?