Lightbox 2 von Lokesh Dhakar in Mobirise

CSS und andere hilfreiche Anweisungen
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Manchmal findet man nicht die richtige Bildergalerie für seine Zwecke in Mobirise.

Deswegen habe ich mich nochmals mit der ganz alten "Lytebox" von Lokesh Dhakar beschäftigt, die es seit dem Jahr 2005 gibt und der als Erfinder der ersten Lightbox gilt.

https://de.wikipedia.org/wiki/Lightbox

Ich habe dabei erst jetzt festgestellt, dass es nun von Lokesh Dhakar eine ganz neue "Lytebox" gibt, die er nun auch "Lightbox" genannt hat.

Dies ist die "Lightbox 2" Version v2.11.4 vom 21.02.2023 - also ganz neu - von vorgestern.

Ich habe gleichzeitig mal eine "eigene" Masonry-Galerie (Mauerwerk-Galerie) erstellt und diese dann mit der neuen "Lightbox 2" versehen:

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

Man kann diese Lightbox natürlich an jedem beliebigen Foto oder auch jedem Text-Link (Beispiele auf meiner Seite) anbringen oder auch hinter einem einzelnen Textlink eine ganze Galerie von Fotos.

Ebenso kann man beliebige Mobirise-Blöcke mit dieser Lightbox versehen, wie in diesem Beispiel:

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


Lightbox 2.jpg
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

In der Lightbox 2 erscheint ständig dieses Ladesymbol zwischen den Bildern, obwohl diese beim ersten Mal anschauen doch im Browser-Cache sein müssten.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Moin,

Mist - hatte gerade dieses gesamte Projekt versehentlich mit einem anderen überschrieben :eek:

Hoffe es geht jetzt wieder ...

Ja - das scheint nur eine Fake zu sein - das Ladesymbol soll wohl "schön" sein ...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

... das hat wohl mit der Dauer des Ladens zu tun, die man einstellen kann. Das passiert nur bei den eben unterschiedlichen Größen der Bilder in meiner Masonry-Galerie

resizeDuration: 700

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

Bei gleichgroßen Bildern passiert das nicht, wie hier:

https://www.mobirise-tutorials.com/Tuto ... tbox-Block
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

Im Firefox schon, aber in einem Chromium-Browser sieht man dieses Ladesymbol immer!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

... das kann ich hier gerade nicht nachvollziehen, egal in welchem Browser. Man könnte natürlich diese Zeit von 700 Millisekunden auf 0 setzen ...

... hier mal ein Video mit dem aktuellen "Edge" Browser:

Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

Bei mir schaut es so aus (nicht von dem Wasserzeichen stören lassen)
Wenn der Hintergrund wenigstens Schwarz wäre, dann würde der Ladeeffekt nicht so stören.


Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

Dein Video scheint beschädigt zu sein - es wird nicht dargestellt.

Video von Werner.jpg


Ich kann das auch nirgendwo feststellen. Ich habe das jetzt an allen möglichen Windows-Rechnern (10 und 11) aufgerufen, am Mac auch sowie am iPhone, iPad, in allen gebräuchlichen Browsern und am Samsung Tablet und Handy. Es läuft überall reibungslos.

Kann es sein, dass Du gerade eine sehr langsame Internet-Verbindung hast?

Hat da denn noch jemand ein Problem mit?

Ich weiß gerade nicht was ich tun könnte. Ich werde mal morgen die Ladezeit von 700 auf 200 Millisekunden zwischen den Bildern reduzieren.


P.S.:

Ich kann Dein Video auch nicht am Handy abspielen - ausschließlich im Edge-Bowser am Desktop:


Video von Werner im Edge.jpg
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

Tommy Herrmann hat geschrieben: Do 23. Feb 2023, 17:55
P.S.:

Ich kann Dein Video auch nicht am Handy abspielen - ausschließlich im Edge-Bowser:



Video von Werner im Edge.jpg
Ist mir egal was der Firefox kann
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

... bin gerade nicht zu Hause und nur am Handy.

Wieso Firefox? Das Video geht am Handy an keinem Browser, auch nicht am Edge.

... ich kann erst morgen einen Screenshot zeigen ...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Moin,

Ich habe jetzt folgende Optionen gesetzt, damit die Zeiten der Überblendungen alle etwas kürzer werden - von zuvor 600 oder 700 Default-Werten auf nun 50 bis 200 Millisekunden, eine permanente Anzeige der Navigation an mobilen Geräten erzwungen, sowie die <Pfeile> am Anfang und am Ende der Galerie, sodass man weiter blättern kann. Weiterhin habe ich die Beschriftung der Bilder auf Deutsch geändert.

Code: Alles auswählen

<!-- Lightbox 2 - optional settings -->
<script>
    lightbox.option({
      'fadeDuration': 50,
      'imageFadeDuration': 100,
      'resizeDuration': 200,
      'alwaysShowNavOnTouchDevices': true,
      'wrapAround': true,
      'albumLabel': "Bild %1 von %2"
    })
</script>
Weiterhin habe ich den Lightbox-Container anstelle von weiß eine schwarze Hintergrundfarbe gegeben:

Code: Alles auswählen

<!-- Optional Lightbox Container changed to black -->
<style>
    .lb-outerContainer {
      background-color: #000;
    }
</style>
Funktioniert das jetzt besser bei Dir? Ich kann hier keinen Unterschied an meinem Rechner, bzw. 150 Mbps Internet, erkennen:

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



P.S.:

nur zu Deiner Info - keine Ahnung was mit Deinem Video ist, das funktionierte bei mir am Laptop im Firefox und am Handy in keinem Browser gestern nicht.

Offensichtlich hast Du das Video ja nun gelöscht ...

An meinem "SAMSUNG Galaxy S22" nutze ich als Standard den "Android Browser", weiterhin habe ich installiert den "Edge", den "Chrome" und den "Firefox" Browser.

An keinem ging das Video von Dir, hier ein Screenshot vom "Edge" Browser, den ich gestern um 19:04 Uhr bereits gemacht hatte - oder hattest Du das zu diesem Zeitpunkt vielleicht bereits gelöscht?

Ich war unterwegs und kann das ja nicht ahnen ...


2023-02-23_Edge Browser am Handy.jpg


... und ja - Ich bin ja immer noch beim Firefox-Browser als Standard, denn dem Edge hängt ja von Anfang an der Verdacht als "Spionage Software" an - keine Ahnung, ob da etwas dran ist oder nicht :eek:

https://www.borncity.com/blog/2021/03/2 ... e-spyware/
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

Tommy Herrmann hat geschrieben: Fr 24. Feb 2023, 04:19 ... und ja - Ich bin ja immer noch beim Firefox-Browser als Standard, denn dem Edge hängt ja von Anfang an der Verdacht als "Spionage Software" an - keine Ahnung, ob da etwas dran ist oder nicht :eek:

https://www.borncity.com/blog/2021/03/2 ... e-spyware/
Windows 11 verwenden aber dann den Firefox benutzen, weil der angeblich nicht spioniert ;)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Erweiterung meiner Lightbox 2 Galerie

Ich habe jetzt noch eine versteckte Lightbox-Galerie mit 6 Fotos als Beispiel hinter einem einzelnen Textlink und einem einzelnen Foto (Thumbnail) erstellt:

https://www.mobirise-tutorials.com/Tuto ... .html#hide
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

Bei den anderen Galerien kann man diesen Trick mit display: none; auch verwenden :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ja - bei jeder - nur eben meist bei Mobirise nicht, weil die Galerien dort über JavaScript-Dateien gesteuert werden, die man über HTML so gar nicht steuern kann. Ich wüsste zumindest jetzt nicht wie.

Mobirise verwendet ja auch die alte (geänderte) "Visual-Lightbox" (die ja von Mobirise entwickelt wurde) und auch an die kommt man innerhalb von Mobirise nicht ran.

Mit einer brutalen Umleitung hat sich Mobirise damals ganz viele Benutzer "geangelt", wer immer im Jahr 2015 - 2017 die "Visual Lightbox" downloaden wollte, landete auf der Seite von der Mobirise-Software (ich auch).

http://www.tommyherrmanndesign.com/nof/ ... n_neu.html
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Das haben viele Benutzer damals schon ganz gerne verwendet, denn man will öfter mal größere Galerien zeigen, ohne sich dann die gesamte Seite mit Thumbs voll zu knallen und ohne die Projekt-Datei von Mobirise zu sehr damit zu belasten.

Wenn man einmal den Bildercode erstellt hat, braucht man ja auch nur die neuen Bilder dort einzutragen und den Code beliebig oft zu kopieren. So geht dieser händische Einbau am Ende eigentlich schneller als über die Werkzeuge von Mobirise.

Wie ich sehe hast Du Deine Upload-Galerie "Photoalbum" auch erneut überarbeitet - toll :tu:

https://werner-zenk.de/archiv/photoalbum.php
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

Was mich interessieren würde, wenn man Thumbnails anzeigt und diese je nach @media screen ausblendet so das je nach Displaygröße mehr oder weniger angezeigt werden.
Bisher setze ich für unterschiedliche Displaygrößen immer mehrere @media-Regeln ein.

Das geht, ist aber kompliziert im Zusammenhang mit der Flexbox, da muss man viel testen. Ich werde es mal mit Grid probieren, ob es da bessere Möglichkeiten als bei Flexbox gibt :confused:

Photoalbum vs. Fotoalbum

Das neue Photoalbum basiert auf dem MySQL-Webseitenschutz dem Nachrichten.Script und der Bilder in den Browser laden - Funktion. Wie bei mir halt üblich, ist das noch lange nicht fertig ...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Ja - habe ich noch nie ernsthaft versucht - das geht bestimmt gut über CSS3 Grid - nur mal hier kurz getestet, da sieht man schon die Anwendung am Handy:

https://www.mobirise-tutorials.com/Test ... lumns.html
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Werner-Zenk.de »

Mein erster Versuch mit Grid war beim Event-Kalender (SQLite). Beim sich öffnenden Fenster (Pop-up) oben der Titel und das Schließen-Kreuz. Hatte es zuvor mit float: left und einer Tabelle probiert :) brachte aber nicht das gewünschte Ergebnis, Grid war dann die Lösung.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Lightbox 2 von Lokesh Dhakar in Mobirise

Ungelesener Beitrag von Tommy Herrmann »

Ja genau - das hatte ich damals schon bemerkt - das hast Du ja mehrmals angepasst.

Ich glaube "CSS Grid" ist eine tolle Sache, widerspricht sich nur eben ein wenig mit dem Framework "Bootstrap", was Mobirise verwendet, da das gesamte Framework ja sowieso auf einem Grid mit 12 Spalten aufbaut.

https://www.mobirise-tutorials.com/Tuto ... -Grid.html
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 7 Gäste