9. září, 2013
O co jde
Objevil jsem a bez modifikace kódu knihovny jsem si opravil či obešel několik chyb v jinak skvělé JavaScriptové knihovně pro zobrazování detailu obrázků, obsahující i funkci galerie.
C čeho jsem vycházel
Co jsem opravil
Ty nejdůležitější opravy souvisí s funkcí Plná velikost (Full Expand), tedy se zobrazením obrázku v plné velikosti.
-
Jeden nepříjemný bug se projevoval jen, když byl obrázek v plné velikosti vyšší než webová stránka a na tu plnou velikost byl zvětšen tlačítkem Plná velikost. Potom bylo několik dalších zobrazených obrázků příliš dole, pod dolním okrajem normálního, ne-highslidového obsahu stránky. A když byl ten obrázek příliš dole, tak se překrýval s ovládacími prvky i s proužkem miniatur. Každý další zobrazený obrázek se zobrazil o něco výše, dokud nebyla pozice obrázku normální.
-
Když byla použita funkce Plná velikost (Full Expand), často došlo k překrytí ovládacích bílých tlačítek a obrázku. Částečně jsem to vyřešil skrýváním těchto ovládacích tlačítek když je zrovna funkce Plná velikost aktivní.
-
CSS vlastností z-index jsem zajistil, že obrázek nemůže překrýt ovládací prvky, což se stávalo hlavně po použití funkce Plná velikost.
-
Highslide přidával k miniatuře na stránce rámeček (border), ten jsem CSS stylem odstranil. V mém případě byl rámečk zbytečný, protože uživatel poznal, že je miniatura interaktivní už tím, že se po najetí zobrazil popisek obrázku. V mém případě byl rámečk zbytečný, protože uživatel poznal, že je miniatura interaktivní už tím, že se po najetí myší na obrázek zobrazil jeho název (to jsem si naprogramoval sám ještě než jsem použil Highslide).
-
CSS stylem jsem zajistil, že když návštěvník webu klikne na miniaturu, tak ta miniatura nezmizí (v rámci animace). To jsem udělal proto, že od zmizení obrázku chviličku trvalo než se spustila animace a uživatelé by se stihli leknout a mysleli by, že jde o bug. V případě malých galerií a fotek s malým rozlišením by toto asi nebylo třeba.
-
Standardní a normálně zdokumentovanou vlastností
hs.showCredits
jsem z levého horního rohu obrázku odstranil text myslím že "Powered by Highslide JS". Šlo by to udělat i CSS stylem.
-
Popis obrázku a jeho pořadové číslo se zobrazovaly pod levým dolním rohem obrázku. CSS stylem jsem to vycentroval.
-
Vzdálenost mezi obrázkem a ovládacími prvky závisela na tom, jestli byl nebo nebyl zobrazen horizontální posuvník. Spravil jsem to JavaScriptovým kódem. Odněkud jsem zkopíroval JavaScriptovou funkci, která zjistí šířku posuvníku.
Kde jsou opravy použity
Opravený kód můžete vidět v akci na stránce blanka.obrazy.sweb.cz/obrazy/. JavaScriptový kód si kdyžtak zkopírujte rovnou ze zdrojového kódu té stránky. Příslušné styly si zkopírujte ze stylopisu toho webu, hledejte v něm Highslide JS.