Lightbox personnalisé - moderne, gestes de balayage, mode plein écran et plus

[Don]

|||
|-|-|-|
| | Aperçu| Theme Creator |
| |Référentiel| GitHub - VaperinaDEV/discourse-custom-lightbox |
| |Guide d’installation|Comment installer un thème ou un composant de thème|
| |Nouveau sur les thèmes Discourse ?| Guide du débutant pour l’utilisation des thèmes Discourse

Bonjour

Ce composant de thème modifie le magnific popup (lightbox/galerie) pour le rendre plus convivial, surtout sur mobile.

---

Ce composant apportera de nombreux changements au magnific popup par défaut.

• Design plus moderne
• Bouton plein écran (raccourci touche F)
• Bouton afficher/masquer le titre
• Gestes tactiles par balayage
  • balayage vers la droite - image précédente
  • balayage vers la gauche - image suivante
  • balayage vers le bas - fermer la lightbox

---

Traductions de thème pour changer le titre des boutons.

zoom_in_button_title: "Zoom avant"
zoom_out_button_title: "Zoom arrière"
close_button_title: "Fermer (Esc)"
fullscreen_button_title: "Mode plein écran (F)"
toggle_title_button_title: "Afficher/Masquer les informations"

---

Cette nouvelle lightbox personnalisée est inspirée de New Discourse Lightbox Enabled on Meta - now disabled

---

Vous voulez toujours utiliser l’ancienne version ?
Vous le pouvez avec la branche old-custom-lightbox.

[Mr.X_Mr.X]

Ce serait super si le défilement pouvait se faire par balayage gauche droite. Sinon, excellent tc.

[Don]

Merci ! Oui, ce serait super, mais malheureusement Magnific Popup ne prend pas en charge les gestes de balayage.

[Don]

J’ai mis à jour le composant de thème et l’OP.

[Don]

Bonjour

J’ai mis à jour ce composant de thème

Cette mise à jour contient les éléments suivants :

1. Suppression de jQuery
2. Changement de la couleur du thème en noir lorsque la lightbox s’ouvre. (par exemple, la barre d’état sera également noire comme l’arrière-plan de la lightbox)
3. Mise à jour vers les icônes FontAwesome 6.
4. Utilisation des curseurs zoom avant et zoom arrière sur l’image.

J’ai ajouté un lien de prévisualisation dans le premier message.

[davidkingham]

Très bien Don, auriez-vous la possibilité d’ajouter une option pour placer les flèches, le bouton de téléchargement et le compteur d’images à l’extérieur de l’image ? Sur un site de photographie, il n’est pas bon de couvrir des parties de la photo, nous voulons voir la photo entière sans distractions. Pas de soucis si ce n’est pas possible, merci !

[Don]

Merci David, je vais chercher une solution

L’idée est de créer un nouveau bouton d’information pour afficher/masquer les informations de l’image telles que le téléchargement, l’image d’origine, le titre et peut-être le compteur.

[davidkingham]

Merci Don, je pensais plutôt à quelque chose comme ceci :

Mais aussi déplacer les flèches à l’extérieur de l’image, cela nécessiterait que l’image soit plus petite pour avoir un peu d’espace autour des bords.

L’autre option serait de masquer toutes les informations jusqu’à ce que le curseur se déplace, je ne sais pas si c’est possible.

[Don]

J’ai eu une inspiration de la façon dont cela s’organise avec la nouvelle lightbox et j’ai fait un concept

Je pense que quelque chose comme ça pourrait fonctionner.

1. simplifier les boutons, changer les positions, flèches plus petites
2. ajouter un bouton plein écran et un bouton d’information pour afficher les informations du bas

[davidkingham]

J’adore ! J’espère que vous pourrez le faire fonctionner

[Don]

Voici la mise à jour de ce composant de thème Il n’est pas encore fusionné mais vous pouvez essayer son fonctionnement sur le Theme Creator.

Changements comme je l’ai mentionné dans ce post Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don.

1. Bouton plein écran (vous pouvez aussi le déclencher avec la touche F)
2. Bouton afficher/masquer le titre
3. Afficher uniquement l’icône de zoom arrière lorsque vous avez zoomé.
4. Masquer les flèches sur mobile
5. Ajout également d’actions de balayage tactile pour le rendre plus confortable à utiliser sur les appareils à écran tactile.
   • balayage vers la droite - image précédente
   • balayage vers la gauche - image suivante
   • balayage vers le bas - fermer la lightbox
6. Quelques ajustements UX

Cette mise à jour supprimera également les paramètres.

[davidkingham]

Ça a l’air bien Don ! Le seul problème que je vois, c’est que lorsque je clique sur les flèches précédent/suivant, la fenêtre contextuelle se ferme. Si vous utilisez les flèches du clavier, cela fonctionne comme prévu. J’ai essayé sur différents navigateurs et le résultat est le même.

[Don]

@davidkingham

lorsque je clique sur les flèches précédent/suivant, la fenêtre modale se ferme

Merci, je l’ai corrigé maintenant. Pouvez-vous vérifier ?

[davidkingham]

Ça marche maintenant !

[Don]

Bonjour

J’ai fusionné la nouvelle lightbox personnalisée

J’ai également mis à jour l’OP…

FEATURE: New custom lightbox

[Don]

Bonjour

J’ai fusionné une fonctionnalité manquante pour les appareils tactiles : FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

La navigation dans les images fonctionne avec des gestes de balayage, nous pouvons donc maintenant utiliser le clic sur l’image pour activer le zoom avant/arrière.

[Don]

Bonjour

Voici une nouvelle mise à jour !

Cette mise à jour inclut plusieurs améliorations de conception :

• Suppression du rembourrage autour de la lightbox
• Les petites images peuvent désormais également être zoomées
• Nouveau design de bouton avec un fond noir transparent, rendant les boutons visibles même sur des images claires, etc.

---

Amélioration pour ordinateur de bureau :

Le défilement des images zoomées sur ordinateur, en particulier le défilement horizontal, n’était pas très facile ni convivial.
Cette mise à jour introduit un mécanisme de défilement suivant le curseur pour améliorer l’expérience.

---

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