V souboru z minulého dílu jste mohli najít malý, leč zajímavý javascript. Ten krátký sled příkazů, který máte možnost vidět níže v tabulce, to je on. V našem skriptu má jednu pohodlnou funkci - otevře nové okno s obrázkem, které bude mít rozměry otevíraného obrázku. Tento skript není nutnou součástí obrázkové galerie, ale má za úkol zpříjemnit celou manipulaci. Řekněte sami, neobtěžovalo by vás, kdyby se při každém kliknutí na obrázek otenřelo nové okno? Mě teda ano. Proto má tento skript ještě jednu funkci. Můžete všechny obrázky otevírat v jednom okně. Jen si to vyzkoušejte. Po kliknutí na kterýkoliv obrázek se vám otevře nové okno a když pak kliknete na další a toto okno necháte otevřené, obrázek se nahraje níže do okna, kde si ho posunutím scrollbarů můžete prohlídnout. Takto si také můžete snadno navybírat kolekci obrázků, otevřít je a všechny pohromadě prohlédnout.
<script language="JavaScript">
function op(s, w, h)
{
if (w > 800) {
wr = 800;
hr = 600;
res = "scrollbars=1, resizable=1";
}
else {
wr = w;
hr = h;
res= "scrollbars=0, resizable=1";
}
si = window.open("", "opened", "toolbar=0, status=1, "+res+", top=10, left=10, width="+wr+", height="+(hr+35)+"");
si.document.writeln('<html><head><title>Wallpaper - '+s+'</title></head><body style="margin: 0px 0px 0px 0px;" bgcolor="white">');
si.document.writeln('<img src="images_big/'+s+'" width="'+w+'" height="'+h+'" border="0" alt=""><br>');
si.document.writeln('<div align="center" style="font-family: arial; font-size: 10pt; color: black; background-color: white;">Right click on image to save it or to set as wallpaper.</div>');
si.document.writeln('<div align="center" style="font-family: arial; font-size: 10pt; color: black; background-color: white;"><a href="#" onClick="window.close();">CLOSE</a></div>');
si.document.writeln('</body></html>');
si.window.status="Wait please... Image is being downloaded.";
}
</script>
|
Pro ty, které zajímá, jak tento skript funguje jsem si tu připravil malé vysvětlení. Celý skript je ve funkci, která se provede kliknutím na obrázek. Funkce má 3 parametry:
s -> {název obrázku}
w -> {šížka obrázku}
h -> {výška obrázku}
Při vyvolání funkce se tyto parametry předávají dále. Pokud vás zajímá, kde jsem nabral název, tak ten nám tam doplní PHP skript z databáze a vygeneruje stránku spolu s parametry. Červeně označený text plní jen bezpečtnostní úlohu - pokud bude obrázek mít šířku větší, než 800 px, otevře se okno velikostí jen 800x600 pixelů. Kdyby tam tato část nebyla a obrázek měl rozměry 1600x1200, pravděpodobně by vám okno překrylo celou obrazovku. Zde se tedy do proměnných res, wr a hr uloží hodnoty, se kterými otevřeme v následujícím řádku nové okno. Všiměte si, že jako vlastnost nového okna dáváme rozměry wr a hr. Výšku přitom ještě zvětšíme o 35 pixelů, aby se tam vešel odkaz na uzavření okna.
Pomocí následujících řádků vepíšeme do nového okna pár HTML kódů a mezi nimi i obrázek, jehož název máme uložen v proměnné s. Modře jsem vám označil odkaz na uzavření okna a poslední, fialový řádek, má za úkol napsat do stavového řádku informaci o tom, že nový obrázek se právě stahuje - to aby návštěvníci okno nezavřeli s dojmem, že se nic neděje.
Podobné skripty jsou na stránkách velmi užitečné, protože mnohdy manipulaci s aplikacemi velmi zjednodušují.
Tímto by obrázková galerie měla být kompletní....ale není. Chybí nám rozhraní, přes které bychom vkládali nové obrázky a zakládali galerie. A právě na tohle se podíváme v příštím dílu.
Čevelíček Marek
|
