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:

<table>
    <tr>
        <td colspan="3"><img name="prw" src="neutral.jpg" width="250" height="150"></td>
    </tr>
    <tr>
        <td><a href="javascript:preview(‚krava.jpg‘)"><img border="0" src="krava_small.jpg"></a></td>
        <td><a href="javascript:preview(‚pes.jpg‘)"><img border="0" src="pes_small.jpg"></a></td>
        <td><a href="javascript:preview(‚ryba.jpg‘)"><img border="0" src="ryba_small.jpg"></a></td>
    </tr>
</table>

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

function preview( filename ) {
    document.images["prw"].src = filename
}

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:

function previewer( width, height, cols ) {
    this.width = width
    this.height = height
    this.count = 0
    this.cols = cols
    this.filenames = new Array()
    this.thumbnails = new Array()
    this.Add = function(filename,thumbnail) {
        this.count++
        this.filenames[this.count] = filename    
        this.thumbnails[this.count] = thumbnail
    }
    this.Draw = function() {
        document.write(‚<table border="1"><tr><td colspan="‘ + this.cols + ‚"><img name="prw" src="neutral.jpg" width="’+this.width+’" height="’+this.height+’"></td></tr>‘);
        for(var pos=1; pos<=this.count; pos+=this.cols) {
            for(i=0; i<this.cols; i++ ) {
                if (i==0) document.write(‚<tr>‘);
                if ( (pos+i) <=this.count ) {
                    document.write(‚<td><a href="javascript:preview(\“ + this.filenames[pos+i] + ‚\‘)"><img border="0" src="‘ + this.thumbnails[pos+i] + ‚"></a></td>‘);
                } else {
                    document.write(‚<td>&nbsp;</td>‘);
                }
                if( i==this.cols) document.write(‚</tr>‘);
            }   
        }
        document.write(‚</table>‘)
    }
}

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:

p = new previewer( 250,150,3 )
p.Add("krava.jpg","krava_small.jpg")
p.Add("pes.jpg","pes_small.jpg")
p.Add("ryba.jpg","ryba_small.jpg")
p.Add("slepice.jpg","slepice_small.jpg")

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:

p.Draw();

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.

1 Příspěvěk v diskuzi

Odpovědět