JavaScript - příklad č. 5

Galerie se slideshow.

obrázek 1 obrázek 2 obrázek 3 obrázek 4

Zdroj části této stránky:

<head> <script LANGUAGE="javascript" SRC="sokno.js"></script> //nahraje externí script, který vytvoří nové okno </head> <body> <img SRC="obr1.gif" ALT="obrázek 1" WIDTH="150" HEIGHT="150" BORDER="0" ONCLICK="zoom(1);" STYLE="cursor: hand;"> <img SRC="obr2.gif" ALT="obrázek 2" WIDTH="150" HEIGHT="150" BORDER="0" ONCLICK="zoom(2);" STYLE="cursor: hand;"> <img SRC="obr3.gif" ALT="obrázek 3" WIDTH="150" HEIGHT="150" BORDER="0" ONCLICK="zoom(3);" STYLE="cursor: hand;"> <img SRC="obr4.gif" ALT="obrázek 4" WIDTH="150" HEIGHT="150" BORDER="0" ONCLICK="zoom(4);" STYLE="cursor: hand;"> //událost onclick zavolá funkci zoom s parametrem v závorce </body>

Zdroj sokno.js:

function zoom(cde) { var NewWin = window.open("","ss","toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes, width=750,height=610,left=10,top=10"); //otevře nové okno s určenými parametry with(NewWin.document) //vytvoří nový dokument { open(); //otevře vytvořený dokument a vytvoří HTML strukturu pomocí funkce write write('<html>\n<head>\n<title>SlideShow</title>\n') write('<script LANGUAGE="JavaScript" SRC="slide.js"></script>\n') //načte externí script ovládající slideshow write('<meta NAME="author" CONTENT="Jaroslav 'Nexis' Kálal" />\n') write('<meta NAME="reply-to" CONTENT="ethan-hunt@seznam.cz (Jaroslav Kálal)">\n') write('<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">\n') write('<meta NAME="generator" CONTENT="Golden HTML editor 4.8.1">\n') write('</head>\n') write('<body ONLOAD="SetPic('+cde+');focus();">\n') //po načtení stránky nahraje obrázek s číslem, //které bylo předáno funkcí zoom write('<center>\n') write('<div>\n') write('<img ID="imgprev" SRC="obr1.gif" / WIDTH="512" HEIGHT="512">\n') write('</div>\n') write('<div>\n') write('<a HREF="javascript:FirstPic();" TITLE="První obrázek">první</a> | \n') write('<a HREF="javascript:PrevPic();" ACCESSKEY="p" TITLE="Předchozí obrázek [ALT + P]">předchozí</a> | \n') write('<a HREF="javascript:NextPic();" ACCESSKEY="n" TITLE="Následující obrázek [ALT + N]">následující</a> | \n') write('<a HREF="javascript:LastPic();" TITLE="Poslední obrázek">poslední</a>\n') write('</div>\n') write('<form NAME="sl">\n') write('<input NAME="PicNum" TYPE="text" SIZE="10" ONFOCUS="body.focus()" STYLE="text-align: center;" />\n') //událost onfocus zaručuje, že pole nepůjde přepsat write('</form>\n') write('</center>\n') write('</body>\n') write('</html>') close(); } }

Zdroj slide.js:

piccount = 4; //udává celkový počet obrázků function SetPic(yy) //funkce nastavující zobrazovaný obrázek { actpic = yy; document.images.imgprev.src = "obr"+actpic+".gif"; document.sl.PicNum.value = actpic+". ze "+piccount; } function NextPic() //funkce pro přechod na další obrázek { if (actpic == piccount) actpic = 1; else actpic++; SetPic(actpic); } function PrevPic() //funkce pro přechod na předchozí obrázek { if (actpic == 1) actpic = piccount; else actpic--; SetPic(actpic); } function FirstPic() //funkce pro přechod na první obrázek { actpic = 1; SetPic(actpic); } function LastPic() //funkce pro přechod na poslední obrázek { actpic = piccount; SetPic(actpic); }

Popis:

Kliknutím na zmenšeninu obrázku otevřete nové okno s obrázkem v původní velikosti.
V tomto okně dále můžete používat odkazy předchozí a následující pro pohyb v galerii.
Pro tyto odkazy lze použít i klávesové zkratky ALT+P a ALT+N.

Poznámky:

Obrázky musí obsahovat na začátku názvu stejnou textovou část a za ní musí být číslo od jedné.
Já používám v tomto příkladu "obrX.gif", kde X je číslo od 1 do 4.

V Netscapu či Mozille klávesová zkratka funguje rovnou.
V Internetu Exploreru klávesová zkratka pouze vybere odkaz a vy musíte ješte stisknout ENTER.

Pokud byste chtěli vytvářet galerii, kde u obrázků nebude pouze jedna přípona nebo galerii,
kde se obrázky budou samy posouvat, napište, já vám velice rád poskytnu složitější script.

Jaroslav "Nexis" Kálal
Gymnázium, Milevsko, Masarykova 183
2004