Náhledy na obrázky trochu jinak – podruhé

15. listopadu 2001

•

V tomto článku se ještě jednou vrátíme ke skriptu pro náhledy obrázků a ukážeme si jeho některá vylepšení. K obrázkům přidáme textové popisky, skript rozšíříme o možnost otevírat obrázky v novém okně a přidáme užitečnou funkci „SlideShow“ – postupného zobrazení všech obrázků. Navíc jsem vám jako bonus nakreslil nový obrázek – velice hezkého slona.

Všechny funkce a vylepšení vyjmenované v předchozím odstavci si můžete vyzkoušet po kliknutí zde (viz též minulý článek). V rozbalovacím menu v prvním řádku tabulky lze zvolit, kde se budou obrázky zobrazovat, na druhém žádku lze zapnout/vypnout zobrazování textových popisků (implicitně je zapnuto). Stiskem tlačítka na třetím řádku tabulky spustíte SlideShow, přičemž interval pro změnu obrázků lze nastavit na témže řádku (doporučuji spustit SlideShow v módu „V tomto okně“). Nakonec, tlačítkem „Vynulovat“ pod textovým polem lze zrušit zobrazení aktuálního obrázku a popisku v témže okně.

Základem skriptu je opět objekt previewer, který oproti minulému příkladu doznal několika změn. Protože se jedná o větší úsek kódu, ukážeme si jej postupně.

Hlavička objektu obsahuje obvyklé inicializace členských proměnných (především polí). Členské pole txts obsahuje popisky k jednotlivým obrázkům. Přibyla interní proměnná iName, do níž je při inicializaci ukládáno jméno instance vytvořeného objektu – to je potřeba k zajištění zpětné vazby při volání členských funkcí objektu. Dále jsou pak inicializovány dosud nevyužité „nulté“ prvky pole na prázdné hodnoty – toto využijeme později při obsluze tlačítka „Vynulovat“:

function previewer( cols, iName ) {
    this.iName = iName
    this.count = 0
    this.cols = cols
    this.filenames = new Array()
    this.thumbnails = new Array()
    this.txts = new Array()
    this.filenames[0] = "neutral.jpg";
    this.txts[0] = "";

Metoda Add je používána k ukládání dat do objektu. Její první dva parametry určují soubor s obrázkem (velkým a malým), třetí parametr je textový popisek:

this.Add = function(filename,thumbnail,txt) {
    this.count++
    this.filenames[this.count] = filename
    this.thumbnails[this.count] = thumbnail
    this.txts[this.count] = txt
}

Funkce Preview se změnila z „externí“ funkce na metodu objektu previewer. Jejím parametrem je index obrázku, který je třeba zobrazit do preview výstupu. Tímto výstupem může být (dle nastavení příslušného SELECT boxu ve formuláři prw) buď aktuální okno, nebo okno nově otevřené. Dle nastavení příslušného checkboxu je zde rovněž vypisován/nevypisován textový popisek. Při výpisu textu do aktuálního okna je použita nejjednodušší metoda, totiž výpis do textového formulářového pole; při výpisu do nově otevíraného okna lze psát přímo do HTML.

this.Preview = function( index ) {
    var fTxt = document.forms["prw"].texts.checked;
    switch(document.forms["prw"].wheretodisplay.options[document.forms["prw"].wheretodisplay.selectedIndex].value) {
        case "here":
            document.forms["prw"].desc.value = (fTxt ? this.txts[index] : "");
            document.images["prw"].src = this.filenames[index]             break;
        case "newwindow":
            if(index>0) {
                var myWin = window.open(“,’win’+index,’scrollbars=yes,resizable=no,width=450,height=300′);
                myWin.document.write("<html><head><title>Preview</title></head><body>");
                myWin.document.write("<img src=’"+this.filenames[index]+"‘><br>");
                if (fTxt) myWin.document.write(this.txts[index]);
                myWin.document.write("</body></html>");
                myWin.document.close();
            }
            break;
    }
}

Pozornější z vás si jistě všimli, že metoda Preview obsahuje test na nenulový index, který se ale uplatňuje pouze ve větvi pro nově otevírané okno. Je tomu tak proto, že volání Preview(0) s výhodou využijeme pro vynulování obrázku v aktuálním okně – při výstupu do nového okna by se ale zbytečně otevíralo okno s prázdným obrázkem i textem.

Funkce Draw kreslí tabulku s náhledy (thumbnaily), proti minulému článku doznala dvou změn, a to ve volání funkce Preview, která je nyní volána nikoliv jako externí, ale jako metoda objektu previewer (zde s výhodou využijeme uloženého jména instance objektu v členské proměnné iName). Druhou změnou je absence vykreslení velkého obrázku pro výstup – ten je definován „ručně“ přímo v HTML kódu stránky (viz níže). Za definicí metody Draw je jedna pravá složená závorka navíc jako ukončení definice celého objektu previewer:

    this.Draw = function() {
        document.write(‚<table border="1">‘);
        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:’+this.iName+‘.Preview(‚ + (pos+i) + ‚)"><img border="0" src="‘ +                      this.thumbnails[pos+i] + ‚"></a></td>‘);
                } else {
                    document.write(‚<td> </td>‘);
                }
                if( i==this.cols) document.write(‚</tr>‘);
            }
        }
        document.write(‚</table>‘)
    }
}

Další část kódu se týká obsluhy SlideShow. Potřebujeme k tomu dvě globální proměnné (k uložení intervalu zobrazování obrázků a příznaku, že SlideShow právě běží), funkci SlideShow, která zobrazuje příslušný obrázek a zároveň periodicky „volá sama sebe“ s využitím časovače, a konečně funkci StartSlideShow, která to celé aspustí a zároveň pohlídá všechny pokusy o opětovné spuštění SlideShow ve chvíli, kdy tato běží. Zde je celý právě popsaný kód:

Před prvním použitím je potřeba vytvořit instanci objektu previewer (vzhledem k četným vazbám doporučuji zachovat její jednoznakové jméno „p“) a naplnit ji daty o obrázcích a jejich popiscích. Konkrétní kód může vypadat nějak takto (použité texty se pravda hodí spíše pro mateřskou školu, ale co taky chcete napsat inteligentního o slepici, že):

p = new previewer( 2,"p" )
p.Add("krava.jpg","krava_small.jpg","Kráva mléko dává.")
p.Add("pes.jpg","pes_small.jpg","Pes- nejlepší přítel člověka.")
p.Add("ryba.jpg","ryba_small.jpg","Dělá chybu, kdo nejí rybu.")
p.Add("slepice.jpg","slepice_small.jpg","Slepice je milá, hezká a přátelská.")
p.Add("slon.jpg","slon_small.jpg","Slon je velký jako dům.")

Nakonec zbývá HTML kód formuláře s tabulkou a obrázky. K němu není mnoho co dodat, snad jen že se jmenuje prw a pro událost onClick na obou použitých tlačítkách jsou definovány obslužné handlery, které volají funkce z výše popsaného kódu. Jména formulářových polí jsou vázána na JS kód, není tedy záhodno je měnit bez vážného důvodu. Totéž ovšem neplatí o grafickém provedení, které si jistě každý přizpůsobí podle svého vkusu:

<form name="prw"><div align="center"><center>
<table border="1" cellpadding="2" cellspacing="0" bgcolor="#FFFFFF"><tr>
    <td bgcolor="#D7D7FF">Zobrazovat obrázky: <select name="wheretodisplay" size="1">
    <option selected value="here">V tomto okně</option>
    <option value="newwindow">Každý ve vlastním okně</option>
    </select></td>
    <td rowspan="4" valign="top"><script>
    p.Draw();
    </script></td>
</tr><tr>
    <td bgcolor="#D7D7FF"><input type="checkbox" name="texts" value="ON" checked>Zobrazovat
    textové popisky </td>
</tr><tr>
    <td bgcolor="#D7D7FF">Slide show: prodleva <select name="delay" size="1">
    <option selected value="1">1</option>
    <option value="2">2</option>
    <option value="5">5</option>
    <option value="10">10</option>
    </select>vteřin. <input type="button" value="Spustit" onClick="StartSlideShow()"></td>
</tr><tr>
    <td align="center"><img name="prw" src="neutral.jpg" height="170" width="250"> <br>
    <input type="text" name="desc" size="50"><br>
    <input type="button" value="Vynulovat" onClick="p.Preview(0)"></td>
</tr></table></center></div></form>

To je k náhledům na obrázky pro tentokrát vše, přeji vám příjemný den.