Sziasztok
Vaperina lehetővé teszi a felhasználók számára, hogy képeket töltsenek fel bejegyzéseikben (és más helyeken). Néha ezek a képek túl nagyok a megjelenítéshez, ezért létrehozzuk a kép átméretezett változatát és hozzáadjuk a bejegyzéshez. Ha rákattintasz erre az átméretezett képre, egy szép fedvényt kapsz, amely tartalmazza a teljes méretű képet – ezt általában lightboxnak nevezik.
Vaperina eddig a Magnific Popupot használta a lightbox kezelésére, melyet kissé átdolgoztunk, hogy felhasználóbarátabb legyen. Ez volt eddig használatban az oldalon.
Ez a téma a lightbox megújításáról szól, a Magnific Popup a felhasználók mai elvárásainak megfelelőbbre való átállásával.
A miért…
A Magnific Popup nagyszerű, korát megelőzte a könnyű kezelhetőség és a szolgáltatáskínálat tekintetében is. Ez nyilvánvalóvá válik, ha figyelembe vesszük, hogy szinte az összes eddig látott funkciója már a 2014-ben megjelent 1.0-s verzióban jelen volt.
Szóval, mi a baj ezzel? A Magnific Popup egy teljesen más világ számára készült, ahol a böngészők közötti kompatibilitás messze elmaradt a maitól. Röviden, manapság mások az igények, mint régen és mivel folyamatosan ügyelünk arra, hogy a lehető legmodernebb legyen Vaperina, így eljött az ideje, hogy ezen a téren is modernizáljuk és magunk mögött hagyjuk az elavult kódokat. Ezzel gyorsabb, megbízhatóbb, kompatibilisebb és nem utolsó sorban jobb, szebb lesz.
Na akkor vágjunk is bele…
Vaperina Lightbox
Néhány megjegyzés a fenti videóról.
Az új lightbox a képet fogja használni háttérként az általános sötét háttér helyett. A kép értelemszerűen kiegészíti önmagát. Megjegyzés: ez nem növeli a hálózati adatforgalmat. A háttérben használt kép a bejegyzésből származó kép, ami azt jelenti, hogy az már a gyorsítótárban lesz, amikor a felhasználók megnyitják a lightboxot.
A képek között navigálhatsz a lightboxban lévő nyilakkal vagy a billentyűparancsokkal. → vagy ↓ a következőhöz és ← vagy ↑ az előzőhöz.
A mobil elrendezés nagyon hasonló, kivéve, hogy a nyilak nem jelennek meg, mert a navigációhoz csúsztatási mozdulatokat adtunk hozzá.
Mobilon csúsztasd balra a következőhöz, jobbra az előzőhöz.
Nagyítás
Az új lightboxnak külön nagyítás gombja van, amely akkor látható, ha a megtekintett kép nagyobb, mint a nézetablak mérete. A nagyítás gombra kattintva nagyítja a képet, majd újra a gombra kattintva pedig kicsinyíti a képet. Ezen kívül most már van egy billentyűparancs is a nagyításhoz/kicsinyítéshez. ( Z gomb ) Végül, ha a kép nagyítható, a képre kattintás ugyanezt a hatást fogja elérni.
A nagyítás másképp működik az új lightboxban.
Asztali gépen a kép kinagyított része követi a kurzort.
Mobilon, érintéses görgetést használ a nagyított képen való mozgáshoz.
Forgatás
Az új lightboxhoz egy külön forgatógombot adtunk hozzá a kép 90 fokos lépésekben történő elforgatásához. A forgatásnak is van egy billentyűparancsa. ( R gomb )
Ez a gyakorlatban így néz ki.
Az elforgatás és a nagyítás kombinálható.
Teljes képernyős mód
Az új lightboxhoz egy teljes képernyős nézet gombot is hozzáadtunk. A gomb megnyomásával a böngészőablak teljes képernyős módba vált. A teljes képernyős mód billentyűparancsa az ( M gomb ).
Nyomon követi az állapotot, és visszatér a normál módba, ha a teljes képernyőt kikapcsolod, vagy ha a lightboxot bezárod.
Kép címe
Az új lightbox elsősorban a képre fókuszál. A képek címei alapértelmezés szerint egy sorra vannak korlátozva, de támogatják a szöveg kibontását. Ehhez is van egy billentyűparancs a cím kibontásához/összecsukásához. ( T gomb ) A cím nem jelenik meg a kép nagyításakor/forgatásakor.
A többi videón még a cím hibásan jelenik meg, nem megfelelően igazodik. Ezt azóta javítottam és ezen a videón látható hogyan működik.
Miniatűrök
Ez a funkció a galéria összes képét miniatűr formában jeleníti meg. Az elrendezés az eszköz képernyőjétől függ; lehet vízszintes vagy függőleges. A miniatűrök automatikus megnyílnak ha 2 vagy több kép van a galériaban.
A gyakorlatban így néz ki.
Billentyűparancs a miniatűrök váltásához. ( A gomb )
és így néz ki mobilon.
Bezárás
Az ( Esc gomb ) továbbra is ugyanúgy működik, mint korábban asztali gépen a lightbox bezárásához. Mostantól egy további csúsztatási kézmozdulat is elérhető mobileszközön, lefelé csúsztatással bezárhatod a lightboxot.
Akadálymentesítés
Az alapokon, például a gombcímkéken túl az új lightboxhoz egy képernyőolvasót is hozzáadtunk. Amikor egy képhez navigálsz a lightboxban, az a formátum alapján beolvassa a kép indexét és címét.
Megjegyzés: az akadálymentesítés folyamatos fejlesztése továbbra is küldetésünk, és ez még korántsem teljes. Mindig van mit javítani, mint ahogy ezen is lesz mit a jövőben, de ami késik nem múlik…
A lightbox fejlesztése és a felmerülő hibák javítása természetesen folytatódik.
Szép napot