Luo reagoiva ja kaunis koko sivun Lightbox BaguetteBox.js n avulla

On kymmeniä lightbox-laajennuksia ja he kaikki ovat hienoja eri syistä. Jotkut työskentelevät paremmin portfolio-sivustoissa, kun taas toiset ovat parhaita reagoiviin asetteluihin.

Mutta yksi suosikkini uusista lisäosista on baguetteBox.js, luonut JavaScript-kehittäjä Marek Grzybek.

Tämä plugin on tietenkin täysin ilmainen ja GitHubissa avoin, jos haluat kaivaa koodiin manuaalisesti.

Kirjasto ei ole mitään riippuvuuksia, joten voit käyttää sitä ilman jQueryä, Zeptoa tai muuta. Se on a puhdas JavaScript-kirjasto, jossa on todella yksinkertainen asennus.

Se on tarkoitettu toimivat täydellisesti mobiililaitteissa, joten se voi tukea pyyhkäisyjä ja hanoja sekä työpöydän ja kannettavien tietokoneiden oletuskäyttäytymistä. Se on yksi harvoista koko näytön gallerioista tukemaan mobiilivuorovaikutuksia sekä täydellistä modaalista vaikutusta.

Tutustu demo-sivu nähdä sen elävän toiminnassa. Se on täysin varustellun gallerian kanssa yksi rivi koodia tarvitaan sen käyttämiseksi:

 baguetteBox.run ( 'baguetteBoxOne'); 

Siis tämä kohdistuu konttielementtiin luokan kanssa .baguetteBoxOne ja koko galleria toimii siitä.

Sinä voisit aseta mukautetut asetukset jos haluat esimerkiksi kuvatekstejä, painikkeita, esilatausominaisuuksia ja takaisinsoitomenetelmiä onclick / onchange-tapahtumissa. Kaikki nämä vaihtoehdot ovat hyvin dokumentoitu GitHubissa jos haluat sukeltaa sisään.

Mutta se ei todellakaan vie paljon, jotta tämä ylittää säiliöelementin ja joidenkin peruskuvien.

Sinä sinulla on täysi määräysvalta animaatioiden, kuvakokojen, pyyhkäisyn vaikutusten ja gallerian sisällön, kuten otsikoiden / kuvatekstien, yli. Tämä vaatii JavaScriptin, joten sillä ei ole puhdasta CSS-vaihtoehtoa modaalille. Mutta koska useimmat selaimet tukevat JavaScriptiä, sen ei pitäisi olla ongelma.

Saat lisätietoja tutustumalla baguetteBox.js-pääsivulle, ja voit myös jakaa ajatuksesi luojan kanssa Twitterissä @feimosi.