Creare Lightbox reattivo e bello a pagina intera con BaguetteBox.js
Ci sono decine di plugin lightbox e sono tutti fantastici per vari 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 Biblioteca non ha alcuna dipendenza, quindi puoi eseguirlo senza jQuery, Zepto o qualsiasi altra cosa. È un libreria JavaScript pura con una configurazione davvero semplice.
È pensato per funziona perfettamente su dispositivi mobili, quindi può supportare swipes 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 il pagina demo vederlo vivere in azione. Ha una galleria completa, insieme al una riga di codice richiesta per farlo funzionare:
baguetteBox.run ( 'baguetteBoxOne');
Così questo bersaglia un elemento contenitore con la classe .baguetteBoxOne e l'intera galleria funziona.
Potresti imposta le opzioni personalizzate se desideri elementi come didascalie, stili dei pulsanti, funzioni di precaricamento e metodi di callback per eventi onclick / onchange. Tutte queste opzioni sono ben documentato 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.
tu avere il pieno controllo oltre le animazioni, le dimensioni delle immagini, gli effetti di scorrimento e il contenuto 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 anche condividere i tuoi pensieri con il creatore su Twitter @feimosi.
