Custom Lightbox - moderno, gesture di scorrimento, modalità a schermo intero e altro

|||
|-|-|-|
| :eyeglasses: | Anteprima| Theme Creator |
| :hammer_and_wrench:|Repository| GitHub - VaperinaDEV/discourse-custom-lightbox |
| :question:|Guida all’installazione|Come installare un tema o un componente del tema|
| :open_book:|Nuovo ai temi di Discourse?| Guida per principianti all’utilizzo dei temi di Discourse

Ciao :wave:

Questo componente del tema modifica il magnific popup (lightbox/galleria) per renderlo più user friendly, specialmente su mobile.


Questo componente apporterà molte modifiche al magnific popup predefinito.

  • Design più moderno
  • Pulsante a schermo intero (scorciatoia tasto F)
  • Pulsante mostra/nascondi titolo
  • Gesti di scorrimento touch
    • scorri a destra - immagine precedente
    • scorri a sinistra - immagine successiva
    • scorri verso il basso - chiudi lightbox

Traduzioni del tema per cambiare il titolo dei pulsanti.

zoom_in_button_title: "Ingrandisci"
zoom_out_button_title: "Rimpicciolisci"
close_button_title: "Chiudi (Esc)"
fullscreen_button_title: "Modalità schermo intero (F)"
toggle_title_button_title: "Mostra/Nascondi Informazioni"

Questo nuovo lightbox personalizzato, ispirato da New Discourse Lightbox Enabled on Meta - now disabled


Vuoi ancora usare la vecchia versione?
Puoi farlo con il branch old-custom-lightbox.

15 Mi Piace

Sarebbe fantastico se lo scorrimento potesse essere fatto con uno swipe a sinistra e a destra. Oltre a ciò, ottimo tc.

3 Mi Piace

Grazie! Sì, sarebbe fantastico, ma sfortunatamente Magnific Popup non supporta i gesti di scorrimento.

4 Mi Piace

Ho aggiornato il componente del tema e l’OP.

4 Mi Piace

Ciao :wave:

Ho aggiornato questo componente del tema :tada:

Questo aggiornamento contiene quanto segue:

  1. Rimuovi jQuery
  2. Cambia il colore del tema in nero quando si apre il lightbox. (ad es. anche la barra di stato sarà nera come lo sfondo del lightbox)
  3. Aggiorna le icone a FontAwesome 6.
  4. Usa i cursori zoom-in e zoom-out sull’immagine.

Ho aggiunto un link di anteprima all’OP. :slightly_smiling_face:

5 Mi Piace

Molto bene Don, c’è la possibilità di aggiungere un’opzione per spostare le frecce, il pulsante di download e il conteggio delle immagini all’esterno dell’immagine? Su un sito di fotografia non è bello coprire parti della foto, vogliamo vedere l’intera foto senza distrazioni. Nessun problema se non è possibile, grazie!

2 Mi Piace

Grazie David, ci lavorerò per trovare una soluzione :slightly_smiling_face:

L’idea è creare un nuovo pulsante informativo per mostrare/nascondere le informazioni dell’immagine come download, immagine originale, titolo e magari un contatore. :thinking:

1 Mi Piace

Grazie Don, stavo pensando più a qualcosa del genere:

Ma anche spostare le frecce fuori dall’immagine, richiederebbe che l’immagine fosse più piccola per avere un po’ di spazio attorno ai bordi per questo.
L’altra opzione sarebbe nascondere tutte le informazioni finché il cursore non si muove, non sono sicuro se sia possibile.

2 Mi Piace

Ho tratto ispirazione da come si organizza con la nuova light-box e ho creato un concept :sweat_smile:

Penso che qualcosa del genere possa funzionare.


  1. semplificare i pulsanti, cambiare posizione, frecce più piccole
  2. aggiungere pulsante schermo intero e pulsante info per mostrare le informazioni in basso
1 Mi Piace

Lo adoro! Spero che tu riesca a farlo funzionare :crossed_fingers:t3:

2 Mi Piace

Ecco l’aggiornamento per questo componente del tema :tada: Non è ancora stato unito, ma puoi provare come funziona su Theme Creator.

Modifiche come ho menzionato in questo post Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don.

  1. Pulsante a schermo intero (puoi attivarlo anche con il tasto F)
  2. Pulsante mostra/nascondi titolo
  3. Mostra l’icona di zoom-out solo quando hai zoomato.
  4. Nascondi le frecce su mobile
  5. Aggiunte anche azioni di scorrimento touch per renderlo più comodo da usare su dispositivi touchscreen.
    • scorri a destra - immagine precedente
    • scorri a sinistra - immagine successiva
    • scorri verso il basso - chiudi lightbox
  6. Alcune modifiche all’UX

Questo aggiornamento rimuoverà anche le impostazioni.

2 Mi Piace

Sembra bello Don! L’unico problema che vedo è che quando clicco sulle frecce precedente/successiva si chiude la lightbox, se usi le frecce della tastiera funziona come previsto. Ho provato vari browser e fa la stessa cosa.

2 Mi Piace

Grazie, l’ho sistemato ora. Puoi controllare?

1 Mi Piace

Funziona ora!

2 Mi Piace

Ciao :wave:

Ho unito la nuova light-box personalizzata :tada:

Ho aggiornato anche l’OP…

4 Mi Piace

Ciao :wave:

Ho unito una funzionalità mancante per i dispositivi touch: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

La navigazione delle immagini funziona con i gesti di scorrimento, quindi ora possiamo usare il clic sull’immagine per attivare lo zoom avanti/indietro.

2 Mi Piace

Ciao :wave:

Ecco un nuovo aggiornamento! :tada:

Questo aggiornamento include diversi miglioramenti del design:

  • Rimossa l’imbottitura attorno al lightbox
  • Anche le immagini piccole ora possono essere ingrandite
  • Nuovo design del pulsante con uno sfondo nero trasparente, che rende i pulsanti visibili anche su immagini chiare, ecc.

Screenshot 2025-05-14 at 9.00.45


Miglioramento per desktop:

Lo scorrimento dell’immagine ingrandita sul desktop, specialmente lo scorrimento orizzontale, non era molto facile o intuitivo.
Questo aggiornamento introduce un meccanismo di scorrimento che segue il cursore per migliorare l’esperienza.


2 Mi Piace