AD Blog

GreyBox je javascriptová aplikace pro zobrazování obrázků podobná LightBox.

Na Greybox se mi líbí:

• velikost jen 22 kB
• naprosto snadné použití dobře popsané v dokumentaci
• ovládání pomocí ikon → není potřeba řešit lokalizaci
• nemusí zobrazovat jenom obrázky (vyzkoušel jsem JPG), ale také internetové stránky, loga, seznamy kontaktů atd.
• stránka je funkční i s vypnutým javascriptem

a nelíbí:

• pokud máte vyplé CSS a povolený javascript, nic nefunguje, což nelze řešit ani pomocí NOSCRIPT

Protože venku sněží, inu Martin na bílém koni letos konečně nezklamal, kamkoliv chodit či jezdit nemá cenu, nudu je třeba zahnat programováním. Tak jsem sedl a napsal takovou malou fíčurovinu, která právě GreyBox používá. Nazval jsem to Simple photogallery.

Ptáte se proč jsem něco takového vytvářel, když na internetu jsou něčeho podobného, ne-li stejného tuny? Inu, občas potřebuji jednoduchou fotogalerii, instalovat Coppermine Photo Gallery nemá valný smysl a aplikace třetích stran musím pořádně testovat, takže je jednodušší si to napsat sám.

Na Simple photogallery jsem od začátku kladl následující požadavky:

• instalace jako pro blbce
• veškeré zobrazované textové informace o obrázku dodávat pomocí EXIF informací obrázku
• funkce nevyžadující podporu databáze
• jednoduché přidávání a odebírání obrázků
• podpora obrázků JPG
• co nejjednodušší vzhled

Jak se mi to povedlo, můžete vyzkoušet sami. Stačí stáhnout a nainstalovat: distro_simple­_gallery.zip (ZIP 1,1MB).

Poznámky k instalaci:

• vyžaduje PHP >= 4.2.0, PHP 5
• na lokálu v Apache zaplou direktivu extension=php_e­xif.dll, která pro svoji funkci potřebuje zaplou direktivu extension=php_mbstr­ing.dll (musí být v pořadí: mbstring → php_exif)
• na hostingu musí být podporována knihovna php_exif.dll, což se dá poznat na výpisu funkce phpinfo() podle hlášení EXIF Support: enabled.
• na hosting stačí (pomocí ftp) nahrát soubory a adresáře:
  • soubor index.php
  • adresář greybox
  • adresář foto se všemi podadresáři
• v souboru index.php změnit cestu k adresáři greybox:

<script type="text/javascript">
  var GB_ROOT_DIR ="http://vaseprezentace.cz/greybox/";
</script>

Jak připravit a nahrát obrázky:

• pro přípravu obrázků potřebujeme nějaký editor schopný hromadné práce s obrázky:
  • používám Zoner Photo Studio 10 , skvělý český program pro úpravu fotografií, mimo jiné umožňující hromadné editace EXIF včetně vkládání klíčových slov
  • alternativou je IrfanView doplněný pluginem pro zobrazení EXIF.DLL .
• pokud chcete, aby Simple photogallery zobrazovalo popisky v okně greyboxu, musíme popisky vložit do EXIF pole Keywords hlavního (velkého, ne náhledu) obrázku. Jednotlivé keywords se potom zobrazí oddělené pomlčkou v levém horním rohu okna greyboxu.
• připravíme náhledy obrázků o velikosti třeba 25%, náhledy musí mít stejné jméno jako zdrojový obrázek, proto je třeba je vygenerovat do adresáře nazvaného thumb. Thumbnaily nemusí obsahovat EXIF informace.
• do adresáře /foto/thumb/ na webu nahrajeme náhledy
• do adresáře /foto/ vlastní fotografie
• zkontrolujeme, zda všechno funguje tak, jak má

Aplikaci jsem spíchl asi za dvě hodiny, včetně testování, takže je určitě co zlepšovat:

• načítání thumbnailů uložených v JPG pomocí funkce exif_thumbnail, což zřejmě bude znamenat přepsání php, protože zobrazení JPG požaduje odeslání hlavičky s MIME image/jpeg
• zobrazení dalších EXIF informací (expoziční čas, clona atd.)
• stránkování

Dalším, spíše dlouhodobým cílem, je zabudovat GreyBox do tohoto blogu.

UPGRADE 24.1.2008

Problém utíkajícího tlačítka „Zavřít“ na IE jsme úspěšně vyřešili na diskuzi JakPsatWeb .

Jedná se samozřejmě o box-model a vykreslovací pravidla quirk versus standard.