TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Che cos’è Lightbox e come utilizzarlo in Weebly?

117

Cos’è Lightbox?

Lightbox è una finestra di sovrapposizione popup che mostra la dimensione originale di un’immagine o di un video quando si fa clic su di essa. JavaScript è stato inizialmente utilizzato in questa tecnica di sovrapposizione delle immagini con jQuery introdotto in seguito per fornire una migliore interfaccia utente. Quando un’immagine viene mostrata nella finestra di sovrapposizione, l’utente sarà comunque in grado di utilizzare le funzioni della tastiera come le frecce su/giù e il tab per navigare nella pagina senza chiudere il popup. L’area esterna della pagina viene oscurata e facendo clic su lightbox esterno si uscirà dal popup.

Di seguito è riportato un esempio di un’immagine visualizzata come lightbox:

Che cos'è Lightbox e come utilizzarlo in Weebly?

Immagine lightbox

Abilitare o disabilitare Lightbox in Weebly

Weebly permette di aggiungere l’effetto lightbox alle immagini utilizzando due elementi:

  • Elemento immagine: puoi aggiungere l’effetto lightbox a una singola immagine.
  • Elemento galleria: puoi aggiungere l’effetto lightbox a una galleria di immagini.

Aggiunta di Lightbox su singola immagine

Trascina e rilascia un elemento dell’immagine nell’area del contenuto desiderata e aggiungi l’immagine al tuo sito web Weebly. Una volta aggiunto, fai clic sull’immagine per visualizzare la casella delle impostazioni popup avanzate come mostrato nello screenshot qui sotto.

Che cos'è Lightbox e come utilizzarlo in Weebly?

Opzione Weebly Lightbox per l’immagine

Puoi abilitare o disabilitare la lightbox utilizzando l’opzione "Lightbox".

Utilizzo di Lightbox su Galleria

Simile alla singola immagine, aggiungi un elemento della galleria e carica tutte le tue immagini. Fai clic su una qualsiasi delle immagini per vedere le impostazioni avanzate e puoi abilitare lightbox sotto l’opzione "Miniatura". L’elemento galleria ha tre opzioni per lightbox:

  • Solo lightbox
  • Lightbox e miniature parziali
  • Lightbox e miniature complete

Che cos'è Lightbox e come utilizzarlo in Weebly?

Effetti Lightbox su Weebly Gallery Element

Quando abilitare Lightbox?

Non è necessario abilitare lighbox per tutte le immagini sul tuo sito Weebly. Di seguito sono riportate alcune delle situazioni in cui potrebbe essere necessario utilizzare questa funzione:

  • Quando si ridimensionano immagini di dimensioni maggiori a dimensioni più piccole
  • Quando un’immagine contiene testo e l’utente deve ingrandire l’immagine alle dimensioni originali per visualizzare il testo.
  • Guarda la galleria di immagini con eleganza.

Quando il lightbox di un’immagine è disabilitato, l’utente non sarà in grado di fare clic sull’immagine per vedere le dimensioni originali in una finestra pop-up. Inoltre, l’opzione lightbox non può essere utilizzata quando si collega l’immagine a qualsiasi altra risorsa poiché facendo clic sull’immagine si accederà all’URL di destinazione.

Come funziona Weebly Lightbox?

Weebly utilizza uno script jQuery fancybox di terze parti da fancyapps.com per offrire funzionalità lightbox. Puoi personalizzare l’effetto lightbox leggendo la sezione suggerimenti e trucchi sul sito fancyapps. Se non ti piace l’effetto lightbox predefinito di Weebly, puoi utilizzare qualsiasi altro plugin JavaScript o jQuery per aggiungere l’effetto lightbox alle tue immagini. Alcuni plug-in visualizzano anche tutte le immagini su una pagina in una visualizzazione di presentazione a comparsa.

Svantaggi dell’utilizzo di Lightbox

Anche se l’effetto lightbox sembra buono, ha molti svantaggi.

  • Poiché lo script jQuery viene utilizzato per fornire l’effetto di fantasia, l’uso di lightbox aumenterà il tempo di caricamento della pagina, quindi utilizzalo solo se necessario.
  • Poiché l’immagine originale non può essere visualizzata in una finestra del browser, l’unico modo per copiare l’URL dell’immagine è fare clic con il pulsante destro del mouse sull’immagine e copiare l’URL.
  • La funzione non funzionerà se JavaScript è disabilitato in un browser web. Le immagini a dimensione intera si apriranno in una finestra del browser quando JavaScript è disabilitato.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More