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
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&amp;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
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
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
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
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
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
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">');
atd.
Tak teď už to funguje, sláva. Snad je to dobře i z hlediska syntaxe..?
Díky všem.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: