Creare Lightbox reattivo e bello a pagina intera con BaguetteBox.js

Ci sono dozzine di plugin lightbox e sono fantastici per diversi motivi . Alcuni funzionano meglio sui siti portfolio, mentre altri sono i migliori per i layout reattivi.

Ma uno dei miei nuovi plugin preferiti da usare è baguetteBox.js, creato dallo sviluppatore JavaScript Marek Grzybek.

Ovviamente, questo plugin è totalmente gratuito da usare e open-source su GitHub se vuoi scavare manualmente nel codice.

La libreria non ha dipendenze, quindi puoi eseguirla senza jQuery, Zepto o qualsiasi altra cosa. È una libreria JavaScript pura con una configurazione davvero semplice .

È pensato per funzionare perfettamente sui dispositivi mobili, quindi può supportare swip e tap, insieme al comportamento predefinito su desktop e laptop. È una delle poche gallerie a schermo intero che supporta le interazioni mobili, insieme a un effetto modale completo .

Guarda la pagina demo per vederla dal vivo in azione. Ha una galleria completa e una sola riga di codice necessaria per farlo funzionare :

 baguetteBox.run ( 'baguetteBoxOne'); 

Quindi, questo target un elemento contenitore con la classe .baguetteBoxOne e l'intera galleria funziona.

Puoi impostare le opzioni personalizzate se desideri elementi come didascalie, stili dei pulsanti, funzioni di precaricamento e metodi di callback per gli eventi onclick / onchange. Tutte queste opzioni sono ben documentate su GitHub se vuoi immergerti.

Ma in realtà non ci vuole molto per andare oltre un elemento contenitore e alcuni elementi di base dell'immagine.

Hai il pieno controllo su animazioni, dimensioni delle immagini, effetti di scorrimento e contenuti della galleria come titoli / didascalie. Questo richiede JavaScript, quindi non ha un'alternativa CSS pura al modale. Ma poiché la maggior parte dei browser supporta JavaScript, non dovrebbe essere un problema.

Per saperne di più, visita la pagina principale di baguetteBox.js e puoi condividere i tuoi pensieri con il creatore su Twitter @feimosi.