Lightbox für einzelne Bilder?
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
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
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
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
Re: Lightbox für einzelne Bilder?
Danke, werde gleich testen!
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
Die Lightbox muss aber die jQuery haben - also unten ran bappen ...
Re: Lightbox für einzelne Bilder?
Vielen Dank, funzt!
https://www.terra-system.de/projekte-bodengutachten.php
Oben der Wasserspielplatz
https://www.terra-system.de/projekte-bodengutachten.php
Oben der Wasserspielplatz
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
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.
... 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.
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
Du kannst der class="lb-caption" (Beschriftung) auch noch Deinen Font, usw. verpassen.
Re: Lightbox für einzelne Bilder?
Hm....
Also
Hat da keine Auswirkung, ich sehe es nichtmals im Debugger
Also
Code: Alles auswählen
.lb-caption {
font-family: 'Arial';
}
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
... muss ich mal gucken. Weiß nicht mehr auswendig, wie ich es gemacht hatte.
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
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';
}
Re: Lightbox für einzelne Bilder?
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
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';
}
Re: Lightbox für einzelne Bilder?
Ah moment, falscher Gültigkeitsbereich für die CSS.
Ja, muss in die global styles
Ja, muss in die global styles
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
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:
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.
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>
Re: Lightbox für einzelne Bilder?
in die global styles. Da geht alles
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
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.
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.
Re: Lightbox für einzelne Bilder?
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.
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.
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
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:
Wobei ich bei den Bildern dieses Blocks immer über das Lightbox Attribut:
data-lightbox="image-block" ...
... 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.
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> 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.
Re: Lightbox für einzelne Bilder?
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
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
- Tommy Herrmann
- Site Admin
- Beiträge: 5925
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Lightbox für einzelne Bilder?
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.
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.
Re: Lightbox für einzelne Bilder?
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
So die Modifikation
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>
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>
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast