Články
Jednoduchá P-Gallery
Nenáročná fotogalerie pro začínající webmastery.
Článek je o aplikaci, kterou jsem napsal s podporou javascriptové knihovny jQuery. Tu jsem nedávno představil v jiném článku. Teď jde o ucelenější produkt, který ukazuje, jak může být jQuery silná.
P-Gallery využívá hlavně funkci toggle(). Výchozím krokem je zde připojení snímků do stránky podobně jako u jiných galerií. Jde o běžný způsob zápisu pomocí tagu img. Hlavní Javascript v sobě obsahuje funkce, které řídí celou galerii.
<a href="../images/snimek1.jpg"><img src="../images/snimek1.jpg" alt="Popis snímku" width="120" height="90" /></a>
<a href="../images/snimek2.jpg"><img src="../images/snimek2.jpg" alt="Popis snímku" width="120" height="90" /></a>
Náhledy mohou být dvojí, buď necháte původní snímky, které se uvedenými rozměry zmenší (nikoli datově), nebo si vytvoříte kopii s nějakým doplněním názvu (např. obrazek.jpg -> min_obrazek.jpg). Pokud je velikost původních snímků řádově v desítkách kB, je to jedno, u větších fotografií je vhodnější druhý způsob. Některé fotoeditory umí zmenšené kopie i s přejmenováním zpracovat hromadně a rychle. O víc se již dále nemusíte starat, celá fotogalerie poběží jako jedna HTML stránka, která ale potřebuje podporu knihovny jQuery. Tu jsem umístil do adresáře jscript.
Poslední, ale důležitou záležitostí je design. Jeho kompletní zpracování najdete v souboru pgallery.css, který obsahuje potřebné kaskádové styly. Zde jsou k dispozici dva, jeden otevírá snímky do nového okna (_blank), druhý posouvá náhledy a umisťuje hlavní fotografii nad ně (_top). Do záhlaví se zapíše jeden z nich. Celkový layout je beztabulkový (jak jinak, že?) a využívá pouze blokové prvky. Poslední adresář images obsahuje fotografie. Aplikace je samozřejmě validní podle kritérií XHTML i CSS.
P-Gallery - download
Použití je velmi snadné. Po stáhnutí (ZIP) a dekomprimaci kompletně celou složku pgallery umístíte do kořenového adresáře svého webu. Složka images musí obsahovat vaše snímky. Do souboru pgallery.htm zapíšete názvy svých fotografií a aplikaci můžete vyzkoušet.
Fotogalerie je určena pro prezentaci menšího počtu snímků. Neumí stránkování, je ale snadno implementovatelná do jakéhokoli webu. Zde je představena v podobě samostatné aplikace, v případě stažení má skryté záhlaví a hlavní název. Pokud ji budete připojovat ke svému webu, doporučuji vše nechat v původním stavu. Jestliže ji použijete jako samostatnou webovou stránku, je vhodné v souboru pgallery.css smazat deklaraci display:none v selektorech #header a #titul.
P-Gallery jsem otestoval na aktualizovaných prohlížečích Firefox (Win, Linux), Opera (Win, Linux), Internet Explorer (Win), Google Chrome (Win) a Safari (Win, iPod Touch Apple).
>>>>>
01-05-2009