Vaperina Lightbox 🎉

Sziasztok :wave:

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. :slightly_smiling_face:

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… :slightly_smiling_face:

A lightbox fejlesztése és a felmerülő hibák javítása természetesen folytatódik. :slightly_smiling_face:

Szép napot :heart:

10 kedvelés