Benutzerdefinierte Lightbox - modern, Wischgesten, Vollbildmodus und mehr

[Don]

|||
|-|-|-|
| | Vorschau| Theme Creator |
| |Repository| GitHub - VaperinaDEV/discourse-custom-lightbox |
| |Installationsanleitung|How to install a theme or theme component|
| |Neu bei Discourse Themes?| Beginner’s guide to using Discourse Themes

Hallo

Diese Theme-Komponente modifiziert den magnific popup (lightbox/gallery), um ihn benutzerfreundlicher zu gestalten, insbesondere auf Mobilgeräten.

---

Diese Komponente wird viele Änderungen am Standard-Magnific-Popup vornehmen.

• Moderneres Design
• Vollbild-Schaltfläche (Tastenkürzel F)
• Titel-Schaltfläche zum Ein-/Ausblenden
• Touch-Wischgesten
• nach rechts wischen - vorheriges Bild
• nach links wischen - nächstes Bild
• nach unten wischen - Lightbox schließen

---

Theme-Übersetzungen, um den Titel der Schaltflächen zu ändern.

zoom_in_button_title: "Zoomen"
zoom_out_button_title: "Rauszoomen"
close_button_title: "Schließen (Esc)"
fullscreen_button_title: "Vollbildmodus (F)"
toggle_title_button_title: "Infos ein-/ausblenden"

---

Diese neue benutzerdefinierte Lightbox ist inspiriert von New Discourse Lightbox Enabled on Meta - now disabled

---

Möchten Sie immer noch die alte Version verwenden?
Das können Sie mit dem Branch old-custom-lightbox.

[Mr.X_Mr.X]

Wäre toll, wenn man durch Wischen nach links und rechts scrollen könnte. Ansonsten toller TC.

[Don]

Danke! Ja, das wäre großartig, aber leider unterstützt Magnific Popup keine Wischgesten.

[Don]

Ich habe die Theme-Komponente und den OP aktualisiert.

[Don]

Hallo

Ich habe diese Theme-Komponente aktualisiert

Dieses Update enthält Folgendes:

1. jQuery entfernen
2. Die Theme-Farbe auf Schwarz ändern, wenn sich die Lightbox öffnet. (z. B. die Statusleiste wird ebenfalls schwarz wie der Hintergrund der Lightbox)
3. Aktualisierung auf FontAwesome 6 Icons.
4. Zoom-In- und Zoom-Out-Cursor auf Bildern verwenden.

Ich habe einen Vorschau-Link zum OP hinzugefügt.

[davidkingham]

Sehr gut, Don. Gibt es die Möglichkeit, die Pfeile, den Download-Button und die Bildanzahl außerhalb des Bildes anzuzeigen? Auf einer Fotografie-Website ist es nicht gut, Teile des Fotos zu verdecken, wir wollen das gesamte Foto ohne Ablenkungen sehen. Keine Sorge, wenn nicht, danke!

[Don]

Danke David, ich werde mich um eine Lösung kümmern

Die Idee ist, einen neuen Info-Button zu erstellen, um die Bildinformationen wie Download, Originalbild, Titel und vielleicht einen Zähler ein-/auszublenden.

[davidkingham]

Danke Don, ich dachte eher an so etwas:

Aber die Pfeile auch außerhalb des Bildes platzieren, dazu müsste das Bild kleiner sein, um etwas Rand um die Kanten zu haben.

Die andere Option wäre, alle Informationen auszublenden, bis der Cursor sich bewegt, ich bin mir nicht sicher, ob das möglich ist.

[Don]

Ich habe mich von der Anordnung mit dem neuen Lightbox inspirieren lassen und ein Konzept erstellt

Ich denke, so etwas könnte funktionieren.

1. Schaltflächen vereinfachen, Positionen ändern, kleinere Pfeile
2. Vollbildschaltfläche und Info-Schaltfläche zum Anzeigen von unteren Informationen hinzufügen

[davidkingham]

Liebe es! Hoffe, du kannst es zum Laufen bringen

[Don]

Hier ist das Update für diese Theme-Komponente Es ist noch nicht zusammengeführt, aber Sie können ausprobieren, wie es im Theme Creator funktioniert.

Änderungen, wie ich sie in diesem Beitrag Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don erwähnt habe.

1. Vollbild-Schaltfläche (Sie können sie auch mit der Taste F auslösen)
2. Titel ein-/ausblenden
3. Zoom-out-Symbol nur anzeigen, wenn Sie hineingezoomt haben.
4. Pfeile auf Mobilgeräten ausblenden
5. Touch-Wischgesten hinzugefügt, um die Verwendung auf Touchscreen-Geräten komfortabler zu gestalten.
   • Nach rechts wischen - vorheriges Bild
   • Nach links wischen - nächstes Bild
   • Nach unten wischen - Lightbox schließen
6. Einige UX-Optimierungen

Dieses Update entfernt auch die Einstellungen.

[davidkingham]

Sieht gut aus, Don! Das einzige Problem, das ich sehe, ist, dass sich die Lightbox schließt, wenn ich auf die Vorwärts-/Rückwärtspfeile klicke. Wenn Sie die Pfeiltasten der Tastatur verwenden, funktioniert es wie erwartet. Ich habe verschiedene Browser ausprobiert und es verhält sich bei allen gleich.

[Don]

@davidkingham

Wenn ich auf die Vor-/Zurück-Pfeile klicke, schließt sich die Lightbox

Danke, ich habe es jetzt behoben. Können Sie es überprüfen?

[davidkingham]

Funktioniert jetzt!

[Don]

Hallo

Ich habe den neuen benutzerdefinierten Lightbox zusammengeführt.

Auch die OP aktualisiert…

FEATURE: New custom lightbox

[Don]

Hallo

Ich habe eine fehlende Funktion für Touch-Geräte zusammengeführt: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

Die Bildnavigation funktioniert mit Wischgesten, sodass wir jetzt auf das Bild klicken können, um das Zoomen ein-/auszuschalten.

[Don]

Hallo

Hier ist ein neues Update!

Dieses Update enthält mehrere Designverbesserungen:

• Polsterung um den Lightbox entfernt
• Kleine Bilder können jetzt auch gezoomt werden
• Neues Button-Design mit transparentem schwarzem Hintergrund, wodurch Buttons auch auf hellen Bildern sichtbar sind usw.

---

Desktop-Verbesserung:

Das Scrollen von gezoomten Bildern auf dem Desktop, insbesondere das horizontale Scrollen, war nicht sehr einfach oder benutzerfreundlich.
Dieses Update führt einen Cursor-Follow-Scrolling-Mechanismus ein, um die Erfahrung zu verbessern.

---

DEV: Adds cursor follow mechanism for scrolling on desktop and some design update