Black Wolf - osobní stránky

Použitelnější Lightbox

Lightbox 2 je šikovná JavaScriptová aplikace pro zobrazování obrázků v plné velikosti a procházení fotogalerií. Ovšem k úplné dokonalosti (alespoň pro moje aplikace) jí něco chybí - lepší uživatelské rozhraní.

Pozn.: Nechcete-li číst podrobný popis mnou provedených změn, jejich stručný seznam a odkaz na stažení upravené verze jsou na konci článku;).

Nejdříve ještě pár vět o aplikaci samotné. Díky JavaScriptu umožňuje zobrazování obrázků v plné velikosti a procházení fotogalerií na stejné stránce, bez přesměrování na jinou stránku či otvírání nových oken a to, jak u podobných aplikací bývá zvykem, v graficky přívětivém prostředí. A její nasazení je velmi jednoduché.

Požadavek na takovouto galerii jsem dostal při implementaci galerií u článků na Vysočina-news.cz. Dělat to celé sám se mi pochopitelně nechtělo, takže jsem hledal jinde a našel několik skriptů disponujících požadovanou funkčností, z nichž jsem jako nejvíce vyhovující vybral výše zmíněný Lightbox 2.

První, co je třeba udělat, je přeložit ikonky a texty (že jich tam ale je:)) do češtiny – to není žádná světoborná úprava.

Zajímavější problémy se však objeví záhy. Někdo, kdo tuto aplikaci ještě nepotkal, na první pohled nezjistí, jak se mezi obrázky posouvat. Odkazem vpřed/vzad je pravá/levá strana obrázku, jenže pokud nad ní není kurzor, není to vidět – příslušná ikona se objeví až po najetí kurzoru. Tzn. u prvního/poslední obrázku je reálná šance, že uživatel na příslušnou část kurzorem vůbec nenajede a nezjistí to. U velkého obrázku se zase může ikona zobrazit mimo aktivní plochu prohlížeče. Takže jsem vedle popisku udávajícího pořadí obrázku přidal jednoduché textové odkazy plnící stejnou funkci – tohle už by mělo být zřejmé na první pohled.

Druhým problémem je poloha samotného navigačního pruhu. Ten je pod obrázkem, takže je-li obrázek vyšší než okno prohlížeče, uživatel dolu vůbec nemusí odrolovat a všimnout si ho. Což je ovšem obrovský problém, neboť na panelu je i tlačítko pro zavření detailu obrázku – tzn. uživatel bude zmatený a nebude vědět jak to zavřít, pravděpodobně klikne na Zpět v prohlížeči, čímž se vrátí na předchozí stranu, místo toho aby se zbavil obrázku.

Částečné řešení je dát pruh nad obrázek. Pak ovšem, když se odroluje dolu, není pruh k dispozici a musí se rolovat zase nahoru, což je nepohodlné. Takže jsem tam dal dva totožné pruhy – jeden nahoru a druhý dolu.

Poslední změna se týká zavíracího tlačítka. Je v pravém horním rohu, takže je-li obrázek větší než okno, opět nemusí být jeho přítomnost zaznamenána a i když o něm člověk ví, musí nepohodlně rolovat. Přemístit ho nalevo by nebylo úplně vhodné (je intuitivně očekáváno vpravo a došlo by ke stejnému problému jako u pruhu nahoře – bylo by třeba zprava rolovat zpět doleva), takže mne napadlo dát ho tam dvakrát – jedno vpravo, druhé vlevo. To však u malého obrázku vypadá ošklivě, udělal jsem to tudíž tak, že levé tlačítko se zobrazí pouze je-li obrázek širší než okno prohlížeče.

A to je vše, takže teď na začátku slibovaný přehled změn a odkaz ke stažení:

Provedené změny:

• Překlad do češtiny.
• Textové odkazy pro přechod na předchozí/následující obrázek u informace o pořadí obrázku.
• Navigační pruh nad i pod obrázkem.
• Je-li obrázek širší než okno prohlížeče, zobrazí se tlačítko pro zavření obrázku nejen vpravo, ale i vlevo.

Upravená verze ke stažení.

V archivu se nacházejí jen upravené nebo přidané soubory, to co je stejné jako v původní verzi tam není.
Testoval jsem to v nejnovějším FF a Opeře, v IE 7 a IE 6 a mělo by to v nich fungovat jak má. Celé je to úprava dělaná čistě pro moje potřeby, zveřejnění je jen „vedlejší produkt“, takže za nic neručím – za plnou funkčnost, za kompatibilitu ani za to, že se to vůbec někomu takhle bude líbit;). Případné další nápady, postřehy či připomínky ale samozřejmě uvítám.

Update 20. 6. 2008 – oprava chyby, viz komentáře.

Publikováno 31.01.2008 19:31 v sekci Webdesign
Trvalý odkaz
Komentářů: 2 (Zobrazit komentáře)