Autor Zpráva
heli
Profil *
#1 · Zasláno: 25. 1. 2007, 13:36:56
Odpovědět Citovat
prosím, poraďte mi: mám fotogalerii, po rozkliknutí miniatury naběhne velké foto (pomocí javaskriptu). Jak udělat, aby se pod každou fotkou objevil ještě text? (u každé fotky jiný). Děkuji. Heli


UKÁZKA MÉHO SKRIPTU:

<div class="obr v">
<a Href="javascript:ShowFoto ('images/fotogalerie/maxi/20.jpg', 450, 338);">
<img src="images/fotogalerie/miniatury/20.jpg" alt="zvětšit foto"></a>
20
</div>



<!--
// Hlavní funkce zobrazující obrázek
function ShowFoto (Img, W, H){
// Zjistí rozlišení monitoru (velikost obrazovky)
var Browser = navigator.appName;
var Version = parseInt(navigator.appVersion);
if ((Browser == "Netscape" & Version >= 4) ||
(Browser == "Microsoft Internet Explorer" & Version >= 4)){
ScrH = screen.height;
ScrW = screen.width;
} else {
ScrH = 0;
ScrW = 0;
}

// Vypočítání správné velikosti a souřadnic pozice nového okna
var BorderW = 1;
W += 2*BorderW;
H += 2*BorderW;

var Position;
if ((ScrH > 0) && (ScrW > 0))
Position = ",left="+(ScrW - W)/2+",top="+(ScrH-H)/2;
else
Position = "";


// Vytvoření nového okna
var NewWin = window.open("", "Fotografie",
"toolbar=no,location=no,width="+W+",height="+H+
",directories=no,status=no,menubar=no,"+
"resizable=no,scrollbars=no"+
Position);

// Naplnění - zapsání zdrojového kódu nového okna
with (NewWin.document){
write("<HTML><HEAD><TITLE>Foto - kliknutím zavřete"+
"</TITLE></HEAD>");
write('<BODY BgColor="black" Text="white"'+
' TopMargin="0" LeftMargin="0">');
write('<A Href="javascript:close();"><IMG Src="'+Img+
'" HSpace="'+BorderW+'" VSpace="'+BorderW+'" Border="0"></A>');
write("</BODY></HTML>");
close();
}
}
// -->
los
Profil *
#2 · Zasláno: 25. 1. 2007, 17:46:56
Odpovědět Citovat
Jak udělat, aby se pod každou fotkou objevil ještě text? (u každé fotky jiný).
Doplniť ten text do toho HTML, ktoré generuješ. Text si pošleš ako ďalší parameter funkcie ShowFoto.
peta
Profil
#3 · Zasláno: 26. 1. 2007, 07:59:28
Odpovědět Citovat
viz los
// Naplnění - zapsání zdrojového kódu nového okna
with (NewWin.document){
write("<HTML><HEAD><TITLE>Foto - kliknutím zavřete"+
"</TITLE></HEAD>");
write('<BODY BgColor="black" Text="white"'+
' TopMargin="0" LeftMargin="0">');
write('<A Href="javascript:close();"><IMG Src="'+Img+
'" HSpace="'+BorderW+'" VSpace="'+BorderW+'" Border="0"></A>');
write("</BODY></HTML>");
close();
}
}

tak jedine, co tam davas je:
<A Href="close()"><IMG Src="'+Img+
'" HSpace="'+BorderW+'" VSpace="'+BorderW+'" Border="0"></A>
tak tam jeste pripsat ten text, ze by? :)
heli
Profil *
#4 · Zasláno: 26. 1. 2007, 12:52:41
Odpovědět Citovat
tak jedine, co tam davas je:
<A Href="close()"><IMG Src="'+Img+
'" HSpace="'+BorderW+'" VSpace="'+BorderW+'" Border="0"></A>
tak tam jeste pripsat ten text, ze by? :)

ten text tam mám připsat takto?
write(text: "+popis+");

a v HTML přidat popis tímto proměnnou způsobem?
<div class="obr v">
<a Href="javascript:ShowFoto ('images/fotogalerie/maxi/20.jpg', 450, 338);">
<img src="images/fotogalerie/miniatury/20.jpg" alt="zvětšit foto">
popis=aaaaaaaaaaaaaaaaaaaaaaa
</a>
20
</div>

Díky.Heli
los
Profil *
#5 · Zasláno: 26. 1. 2007, 21:31:32
Odpovědět Citovat
Nebolo by lepšie to robiť na strane servera? Potom by si mala iba jednoduché HTML a HTML pre obrázok s jeho by generoval server: 
<div class="obr v">

  <a href="show-image.php?id=20" target="_blank"><img src="images/fotogalerie/miniatury/20.jpg" alt="popis" title="zvětšit foto"></a>

</div>


ten text tam mám připsat takto?
write(text: "+popis+");
Skoro. Argumentom metódy write je reťazec, takže by to mohlo vyzerať nejako takto: write("text: "+popis);
Funkcia ShowFoto by bola deklarovaná takto: function ShowFoto (Img, W, H, popis)
Volala by si ju takto: ShowFoto ('images/fotogalerie/maxi/20.jpg', 450, 338, 'aaaaaaaaaaaaaaaaaaaaaaa');

Alebo lepšia možnosť:
V HTML bude náhľad na obrázok v odkaze na veľkú fotku. Keď niekto nebude mať zapnutý JavaScript, kliknutím na náhľad sa mu zobrazí veľká fotka. Ak bude zapnutý JavaScript, v obslužnej funkcii pre udalosť click otvoríš nové okno s veľkým obrázkom a popisom. Popis bude v atribúte alt obrázku pre náhľad. Takže keď niekto nebude vidieť obrázok, zobrazí sa mu namiesto textu "zvětšit foto" priamo popis obrázka. 
<div class="obr v">

	<a href="images/fotogalerie/maxi/20.jpg" onclick="return !showFoto(this, 450, 338);" title="zvětšit foto"><img src="images/fotogalerie/miniatury/20.jpg" alt="popis"></a>

</div>

Potom už iba napíšeš funkciu showFoto tak, aby nevyzerala ako z 90-tych rokov. To znamená, že sa nebude spoliehať na detekciu prehliadača a bude fungovať aj v prípade, že niekto blokuje popup okná. Napr. nejako takto: 
function showFoto (anchor, w, h) {

	var win;

	var borderW = 1;

	var scr = {w: (screen.width - 0) + 2 * borderW, h: (screen.height - 0) + 2 * borderW};

	var img = anchor.getElementsByTagName("img")[0];

	

	if (img)

		win = window.open("", "Fotografie",

			"toolbar=no,location=no,width=" + w + ",height=" + h +

			",directories=no,status=no,menubar=no,resizable=no,scrollbars=no"+
 
			(!isNaN(scr.w)? ",left=" + (scr.w - w) / 2: "") +

			(!isNaN(scr.h)? ",top=" + (scr.h - h) / 2: ""));

	

	if (win) {

		win.document.write("<html><head><title>Foto - kliknutím zavřete</title></head>" +

		'<body bgcolor="black" text="white" topmargin="0" leftmargin="0" onclick="window.close()">' +

		'<img src="' + anchor.href + '" hspace="' + borderW + '" vspace="' + borderW + '" border="0">' +

		'<center>' + img.alt + '</center>' +

		"</body></html>");



		win.document.close();

	}

	

	return win;

}

Generované HTML si môžeš prípadne ďalej upraviť.

Ďalším krokom by bolo oddelenie JavaScriptu od HTML, ale toto by mohlo stačiť.
heli
Profil *
#6 · Zasláno: 28. 1. 2007, 09:14:30
Odpovědět Citovat
LOSI
děkuji, skript funguje i s popisem v IE,
ale v Mozille to dělá problémy - otevřou se dvě okna,jedno prázdné a druhé s obrázkem.

A ještě: v IE po rozkliknutí miniatury se sice objeví velké foto, ale s hláškou:
" z důvodu ochrany zabezpečení bylo souboru zakázáno zobrazení aktivního obsahu . . ."

Toto je už záležitostí nastavení počítače, nebo mohu ovlivnit v kódu, aby se to nezobrazovalo?

Díky. Heli
los
Profil *
#7 · Zasláno: 28. 1. 2007, 10:40:19
Odpovědět Citovat
ale v Mozille to dělá problémy - otevřou se dvě okna,jedno prázdné a druhé s obrázkem.
Skúšal som to pod IE, FF a O a šlo mi to bez problémov. Ak Ti to nefunguje, tak by pomohol odkaz na stránky, kde to nejde.

" z důvodu ochrany zabezpečení bylo souboru zakázáno zobrazení aktivního obsahu . . ."
IE je defaultne nastavený tak, aby pri stránkach s JavaScriptom spúšťaných z localhostu zobrazoval toto hlásenie. Keď budú stránky na inej doméne, nebude sa zobrazovať.
Časová prodleva: 1 měsíc
nachos
Profil *
#8 · Zasláno: 1. 3. 2007, 19:31:29
Odpovědět Citovat
Jak mám vyrobit tu miniaturu?? Hledal jsem zde nějáký článek ale nic jsem nenašel.
los
Profil *
#9 · Zasláno: 1. 3. 2007, 20:44:12
Odpovědět Citovat
nachos
V JavaScripte nijako. Keď máš otázku, ktorá s pôvodnou nesúvisí (alebo len veľmi okrajovo), tak je lepšie založiť nové vlákno.

Ak to chceš robiť pri uploadovaní na server, tak si pozri manuál toho, čo používaš na strane servera (pre PHP napr.: http://sk.php.net/manual/en/ref.image.php konkrétne funkice imagecopyresized alebo imagecopyresampled). Ak to chceš pre statické obrázky, tak stačí ľubovoľný grafický editor (napr. XnView).
ras
Profil *
#10 · Zasláno: 3. 3. 2007, 04:07:46
Odpovědět Citovat
Dobrý den! Mám podobný problém - zkouším udělat galerii. Rád bych se zeptal, jestli mohu nějak do kódu

...
echo "<a title="../slides/$soubor" target="slide" onclick="window.open('../slides/$soubor','_blank','menubar=no, border=no,width=$sirka,height=$vyska'); return false">
<img class="image" src="../thumbs/$soubor" border=0></a>"
...

přidat ještě i to, aby se po kliknutí to okno vygenerované javascriptem zase zavřelo, čili jestli můžu udělat skript generovaný skriptem ( seznam obrázků mi vytváří phpčko ). Všechno ostatní mám vyzkoušené, že chodí tak, jak si představuji. Díky za jakoukoliv radu

P.S.: Moc se mi nechce to celé překopávat podle výše uvedeného vzoru :-)
r.a.s
Profil *
#11 · Zasláno: 3. 3. 2007, 22:11:51
Odpovědět Citovat
Tak jsem se tu tročku pohrabal a našel jsem prima řešení v jiném svazku:

http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=12&topic=2 1735

Funguje to, jen jsem to musel dát do těla kódu a ne do hlavičky ...
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0