Náhledy na obrázky trochu jinak

K prohlížení objemově větších obrázků se na WWW stránkách většinou využívají malé náhledy, které po kliknutí otvírají novou stránku, případně nové okno, s obrázkem v originální, tedy velké velikosti. Pokud ale prohlížíte větší množství obrázků, je tento princip trochu nepohodlný – za každým zobrazeným obrázkem je nutno zmáčknout tlačítko „zpět“. V tomto článku si ukážeme jednoduchý způsob, jak vše zvládnout na jedné stránce.

Princip této „techniky“ je opravdu prostý: místo toho, abychom pro každý velký obrázek otvírali samostatné okno, zadefinujeme už přímo na stránce s náhledy plochu pro velký obrázek a pomocí JavaScriptu po kliknutí na náhled měníme její obsah – ukázka najdete zde.

Uvedený princip vyžaduje jedinou úlitbu: totiž zabezpečit u velkých obrázků stejnou velikost nebo aspoň poměr stran – teoreticky by sice šlo měnit proporce velkého náhledu dle aktuálního obrázku, na druhou stranu by tím ale docházelo k „rozhození“ grafického vzhledu celé stránky – za vyvážený vzhled webu ta trocha práce navíc s ořezáním obrázků nebo jejich doplněním bílými plochami jistě stojí.

Při samotné realizaci stránky je třeba nejprve uskládat náhledy do vhodné struktury – např. tabulky. Dalším krokem je definice prázdného místa pro zobrazení velkého obrázku – ten lze vyplnit průhledným gifem nebo neutrálním nadpisem, tak jak je tomu v ukázce. Každý náhled je „zapouzdřen“ do HTML odkazu, který volá jednoduchou JavaScriptovou funkci. Takto vypadá právě popsaný HTML kód v uvedeném příkladu:

A takto JavaScriptová funkce preview, volaná z odkazů (funkci lze uvést v hlavičce HTML stránky):

Vylepšená verze náhledů

Protože uvedený způsob předpokládá zapnutý JavaScript v návštěvníkově prohlížeči, není důvod nevyužít JavaScriptu trochu více a usnadnit si práci s ručním kreslením HTML tabulky a umísťováním náhledů do jejího nitra. Zejména u většího počtu náhledů se může hodit kód, jemuž pouze zadáme adresy obrázků a který za nás vykreslí celou tabulku včetně příslušných odkazů – ukázka je zde.

Funkce preview zůstává v druhém příkladu nezměněna, co přibylo, je definice objektu previewer, který má na starost právě vykreslování tabulky. Jeho kód není dlouhý, ukážeme si jej tedy najednou:

Při konstrukci objektu jsou pouze inicializována interní pole, do nichž budou později uloženy adresy obrázků a náhledů; dále jsou pak do členských proměnných objektu přepsány parametry konstruktoru – šířka obrázku, výška obrázku a počet sloupců vykreslované tabulky (v tomto pořadí).

První z metod objektu, Add, má za úkol přidat odkazy na obrázek a náhled do interních struktur objektu. Parametr filename určuje adresu obrázku, parametr thumbnail adresu náhledu. Druhá metoda objektu, Draw, vykresluje samotnou tabulku. Jde o nudnou funkci, která kromě neustálého volání document.write nevyniká ničím mimořádným.

Po definici objektu je potřeba vytvořit jeho instanci, a tu naplnit samotnými daty – odkazy na obrázky a jejich náhledy. Stejně jako definice objektu je i tento kód umístěn v hlavičce stránky:

Nakonec zbýcá na vhodném místě HTML stránky vykreslit příslušnou tabulku náhledů, k čemuž poslouží zavolání metody Draw instance objektu previewer:

A to je pro tentokrát k náhledům vše, přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.