Náhledy na obrázky trochu jinak

    1

    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