| Autor | Zpráva | ||
|---|---|---|---|
| tramvajak Profil |
Dobrý den, mám takový malý problém
(nechci vám tady zakládat zbytečně nové téma, tak využívám už existující). Moderátor Chamurappi: To je hodně hloupý nápad, už to víckrát nedělej, přesouvám.
Vytvářím web, kde bude součástí každé stránky fotogalerie. Má představa je taková, že po klinutí na danou zmenšeninu fotky se mi otevře okno pomocí události onclick, které bude mít nějaké parametry zadefinované pomocí funkce. Potřeboval bych, aby se v tom novém okně zobrazila fotografie v původní velikosti a pod ní komentář. Problém je v tom, že při definování samotné funkce onclick jsem celkem v koncích. Takto jsem si myslel, že bych se odkazoval ve zdrojovém kódu stránky: <a href="fotografie.jpg" target="_blank"><img src="fotografie.jpg" border=0 align="center" alt="nacitam" onClick='funkce_fotky("fotografie.jpg", "Zde je popisek fotografie");return false'" width="100" height="75"></a> Jenže s definováním toho scriptu "funkce_fotky" mám potíž - nevím, jak to napsat... Pomůžete prosím někdo? Díky moc všem :-) t |
||
| fajzen Profil |
#2 · Zasláno: 23. 5. 2009, 22:18:16 · Upravil/a: fajzen
Bude treba vytvoriť dva html súbory:
gallery.html - súbor so zmenšeninami fotiek foto.html - súbor, ktorý bude to vyskakovacie okno s fotkou v plnej veľkosti + textom gallery.html
<html>
<head>
<script>
function funkce_fotky(foto, text)
{
window.open("foto.html?img="+escape(foto)+"&text="+escape(text), "fotka","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes");
}
</script>
</head>
<body>
<a href="foto.html?img=img.jpg&text=Zde je popisek fotografie" target="_blank" onclick="funkce_fotky('img.jpg', 'Zde je popisek fotografie');return false;" >
<img src="img.jpg" border=0 align="center" alt="" width="50" height="50" />
</a>
</body>
</html>
foto.html
<html>
<head>
<script>
function uprav_stranku()
{
var pole = window.location.search.substr(1).split("&");
var httpGetVars = new Array();
for(i = 0; i < pole.length; i++)
httpGetVars[pole[i].split("=")[0]] = unescape(pole[i].split("=")[1]);
document.getElementById("foto").src= httpGetVars["img"];
document.getElementById("text").innerHTML= httpGetVars["text"];
}
</script>
</head>
<body onload="uprav_stranku();">
<img src="#" border=0 align="center" alt="nacitam" id="foto" />
<p id="text"></p>
</body>
</html>
Popis: window.open() - otvára nové okno popis metódy na jakpsatweb.cz aby bol súbor foto.html univerzálny pre všetky fotky a popisy, bude mu funkce_fotky() predávať názov súboru a text popisu pomocou adresy foto.html si hneď po načítaní vytiahne z adresy názov fotky a nahrá ju do <img>, takisto si vytiahne text popisu a nahrá ho do <p> ak by sa ti nepáčilo, že sa nové okno otvára s maximálnymi rozmermi, môžeš mu buď nastaviť pevné rozmery ako atribút funkcie window.open(), alebo pomocou window.resizeTo(sirka, vyska), ktorú by si volal vo funkcii uprav_stranku() rozmery obrázku by si zistil
var sirka= document.getElementById("foto").width;
var vyska= document.getElementById("foto").height;
problém takéhoto riešenia je to, že resizeTo() nastaví rozmery celého okna, nie len zobrazovanej plochy (neviem či existuje nejaká funkcia, ktorá toto dokáže, ak hej, rád sa nechám poučiť), takže by si k šírke a výške musel pričítať nejakú konštantu- na status bar, location bar, vrchný pruh okna..., ale tá je v každom prehliadači iná... + ešte nejakú výšku popisku ešte si neodpustím pár poznámok k tomu, čo si napísal: onclick patrí tagu a, keby si to napísal hentak, presmerovalo by to na inú stránku vždy, nové okno by nevyskočilo nedávaj, prosím ťa, ako alt pri obrázku text "načítam", daj tam skôr ten popis obrázku ;) |
||
| tramvajak Profil |
#3 · Zasláno: 24. 5. 2009, 11:45:03
Hmm, tak tohle vypadá zajímavě, jen si s tím zkusím ještě trošku pohrát, totiž příjde mi zbytečné, že bude muset být na začátku kódu každé stránky zadefinovaná funkce, zkusím zadefinovat celou funkci pro otevírání fotek do souboru skriptu a na tento se jen na každé stránce odvolávat. Ale hodně mi toto pomohlo, to každopádně! Díky moc :-)
Moderátorovi se omlouvám... zvyk z jiného fóra, kde naopak nemají rádi zakládání nových témat :-) |
||
| tramvajak Profil |
#4 · Zasláno: 24. 5. 2009, 12:27:04 · Upravil/a: tramvajak
Ještě mě napadlo... dalo by se to nějak udělat bez toho zobrazovacího souboru foto.html ?
Převedl jsem výše uvedené do souboru skriptu, a přemýšlím, jestli by nešlo pomocí několika writeln(' ... ') zapsat vlastnosti vyskakovacího okna, myslím, že to nějak půjde... Zkoušel jsem toto:
function funkce_fotky(foto, text)
{no=window.open("toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes");
}
with (no.document)
{open();
writeln('<img src="foto" alt="" title="" border="0">');
writeln('<font size="2"><font face=Arial CE><left>'text'</font></font></font></center>');
close();}}ale někde je tam chyba :-) |
||
| _es Profil |
#5 · Zasláno: 24. 5. 2009, 12:54:25
tramvajak
Kód sa dá vložiť ako kód, máš na to tlačidlo. má to veľa výhod, napríklad môžeš kliknúť na metódu open vo fajzenovom kóde a zistiť, prečo to máš zle. Príkazu with je dobré sa vyhýbať, užitočný je len málokedy. |
||
| tramvajak Profil |
#6 · Zasláno: 24. 5. 2009, 15:39:48 · Upravil/a: tramvajak
Tak jsem si s tím ještě trochu hrál a výsledek je toto:
function funkce_fotky(foto,text,datum)
{no=window.open("","okno", "left=50, top=25, width=810, height=665, location=no, scrollbars=no, directories=no, menubar=no, status=no, resizable=yes, tap=no, toolbar=no, copyhistory=no, menubar=no");
with (no.document)
{open();
writeln('<body topmargin="5" leftmargin="5" bgcolor="navy">');
writeln('<center>');
writeln('<img src="'foto'" alt="" title="" border="0">');
writeln('<font size="2"><font face=Arial CE><font color="D4DFFF"><left>'text'</font></font></font>');
writeln('<p class=MsoNormal><font size="1"><font face=Arial CE><font color="D4DFFF"><left>'datum'</font></font></font></p>');
writeln('</center>');
close();}}Už to docela funguje, "jenom" je problém v tom, že se v tom novém okně místo obrázku zobrazuje prázdný čtverec, jakoby neseděla cesta, a proměnné text se nezobrazují vůbec. V kódu stránky jsou u odkazování na funkci zadefinovány. Takže problém bude dle mého názoru ve funkci, asi mi tam u 7. - 9. řádku ještě něco chybí u zadání "foto", "text" atd. ... |
||
| Chamurappi Profil |
#7 · Zasláno: 24. 5. 2009, 15:52:09
Reaguji na tramvajaka:
„writeln('<img src="'foto'" alt="" title="" border="0">');“ Takhle se řetězce v žádném normálním programovacím jazyku nespojují. Nastuduj si základy JavaScriptu na JPW. |
||
| tramvajak Profil |
#8 · Zasláno: 24. 5. 2009, 20:27:44
No jo, problém byl v tom, že jsem tam neměl logický operátor "+" pro spojení.
Takže writeln('<img src="'+foto+'" alt="" title="" border="0">');Tak teď už to funguje, sláva. Snad je to dobře i z hlediska syntaxe..? Díky všem. |
||
|
Časová prodleva: 15 let
|
|||
0