Creați lumină receptivă și frumoasă la pagina completă cu BaguetteBox.js
Sunt zeci de pluginuri lightbox și toate sunt minunate din diferite motive. Unii lucrează mai bine pe site-urile de portofoliu, în timp ce altele sunt cele mai bune pentru planurile receptive.
Dar, unul dintre pluginurile mele noi preferate de folosit este baguetteBox.js, creat de dezvoltatorul JavaScript Marek Grzybek.
Desigur, acest plugin este complet gratuit pentru utilizare și este deschis pe GitHub dacă vreți să introduceți manual codul.
Librăria nu are nici o dependență, astfel încât să puteți rula fără jQuery, Zepto sau orice altceva. E o pură bibliotecă JavaScript cu o configurație foarte simplu.
Înseamnă să funcționează perfect pe dispozitivele mobile, astfel încât să poată suporta dispozitivele rapide și robinetele, împreună cu comportamentul implicit pe desktopuri și laptopuri. Este una dintre puținele galerii cu ecran complet să sprijine interacțiunile mobile, împreună cu un efect modal complet.
Check out pagina demo să o văd trăită în acțiune. Are o galerie complet echipată, împreună cu o singură linie de cod necesară pentru a funcționa:
baguetteBox.run ( 'baguetteBoxOne');
Deci asta vizează un element container cu clasa .baguetteBoxOne
iar toată galeria o face pe asta.
Ai putea setați opțiunile personalizate dacă doriți subtitrări, stiluri de butoane, funcții de preîncărcare și metode de apel invers pentru evenimente onclick / onchange. Toate aceste opțiuni sunt bine documentate pe GitHub dacă vrei să te scufunzi.
Dar, într-adevăr, nu este nevoie de mult pentru a obține acest lucru dincolo de un element container și unele elemente de bază de imagine.
Tu au control complet deasupra animațiilor, dimensiunilor imaginilor, efectelor de mișcare și conținutului galeriilor, cum ar fi titlurile / subtitrările. Acest necesită JavaScript, deci nu are o alternativă pură CSS la modal. Dar, deoarece cele mai multe browsere acceptă JavaScript, nu ar trebui să fie o problemă.
Pentru a afla mai multe, vizitați pagina principală a baguetteBox.js și puteți, de asemenea, să vă împărtășiți gândurile cu creatorul pe Twitter @feimosi.