Bild im PopUp laden & 'Fenster schliessen'
Sven Schulz
- javascript
Moin moin zusammen :)
So langsam bin ich mit dem PopUp am verzweifeln :( Ich bekomme das nicht hin. Zu meinem Problem mit dem PopUp:
Ich hab 10 Bilder im kleinen Format, so wenn man auf die klickt soll sich ein PopUp öffen in dem das gewünschte Bild angezeigt wird (gross Format) unter dem Bild steht dann noch der Text 'Fenster schliessen'
Und irgendwie bekomm ich das nicht hin, dass ich mehr als ein Bild anzeigen kann :(
Hab mir schon mehrer Beispiele bei Google & Co. angeschaut aber irgendwie wurde das nur noch mehr und mehr wo ich dann kein durchblick mehr hatte. Die Seite von SelftHTMl -> http://selfhtml.teamone.de/javascript/objekte/window.htm hab ich mir auch schon angeschaut aber dort blick ich auch nicht so durch.
Wäre super nett, wenn mir einer da helfen könne wie ich das hinbekomme, das ich mehre Bilder so ansprechen kann :)
Danke schonmal im voraus für eure Antworten.
Gruss
Sven
Tach auch,
Und irgendwie bekomm ich das nicht hin, dass ich mehr als ein Bild anzeigen kann :(
Was klappt denn nicht? Mehrere Bilder gleichzeitig öffenen? Oder nacheinander? Oder wie?
Schick mal deinen Quelltext mit. Dann geht das etwas besser...
Greets Tom1tk
Tach auch,
Und irgendwie bekomm ich das nicht hin, dass ich mehr als ein Bild anzeigen kann :(
Was klappt denn nicht? Mehrere Bilder gleichzeitig öffenen? Oder nacheinander? Oder wie?
Schick mal deinen Quelltext mit. Dann geht das etwas besser...
Greets Tom1tk
Die Bilder (klein) sollen so dargestellt werden wie eine Bilder-Gallary was auch klappt. Nur jetzt wollt ich das gerne so haben, wenn ich auf Bild1 klicke das dies in einem PopUp geöffnen wird unter dem Bild steht dann noch der Text 'Fenster schliessen' - schliesst man Bild1 sieht man die Gallary und wenn man z.B. auf Bild6 klick öffnet sich das Bild wieder im PopUp u.s.w. :)
Das grosse Bild mit dem Text 'Fenster schliessen' darunter haben auch schon hinbekommen, d.h. bild1.htm u.s.w. nur halt bekommen ich es nicht hin mit dem öffnen von dem PopUp :( wo muss ich dem Script sagen hier das ist Bild1 und wenn man dort klick öffne bild1.htm ?
Gruss
Sven
Schick mal deinen Quelltext mit. Dann geht das etwas besser...
So hier nochmal der Quelltext, ist aber nur ein teil :)
---
Dies ist die Seite wo die Gallary ist, also Bild im klein Format:
<code>
<html>
<head>
</head>
<body>
<a href="javascript:openWindow('Bild1');"><img src="../last-events/27-02-04/1-k.jpg" alt="" width="140" height="105" border="0"></a>
</body>
</html>
</code>
Ist jetzt nur ein Bild sollen aber 10 sein ;)
Hier das JavaScript, ob da noch was richtig ist, bezweifel ich :D
<code>
<script language="JavaScript">
function openWindow(Bild1) { 'Bild1' = window.open('bild1.html', 'remote', 'width=670,height=550,left=20,top=20') }
</script>
</code>
So und nun die HTML Datei wo das Bild gross dargestellt wird:
<code>
<html>
<head>
</head>
<body>
<img src="../last-events/27-02-04/1.jpg" alt="" width="640" height="480">
<br>
<a href="javascript:window.close()">:: Fenster schliessen ::</a>
</body>
</html>
</code>
Tja, ob hier irgendwas richtig ist denke ich mal ehr nicht :( Hoffe aber tortzdem, dass mir einer von euch dabei helfen kann :)
Gruss
Sven
Hat keiner eine Idee von euch?
Hat keiner eine Idee von euch?
Ja,
Diese folgende Datei heißt OpenNewWindow.js
// BILD IN NEUEM ZENTRIERTEN FENSTER ÖFFNEN
function OpenNewWindow(Picture,Breit,Hoch)
{
xsize = Breit+40;// Zusatz für Rand rechts und links
ysize = Hoch+100; //Zusatz für Rand oben und unten - damit Button angezeit werden kann
ScreenWidth = screen.width;
ScreenHeight = screen.height;
xpos = (ScreenWidth/2)-(xsize/2);
ypos = (ScreenHeight/2)-(ysize/2);
NewWindow=window.open("","Picture","height="+ysize+",width="+xsize+",scrollbars=no,resizable=no,top="+ypos+",left="+xpos+"");
NewWindow.document.write ("<html><head><title>GROSSBILDANZEIGE");
NewWindow.document.write ("</title>");
NewWindow.document.write ("</head>");
NewWindow.document.write ("<body leftmargin='0' topmargin='0' marginwidth='0' marginheight='0' bgcolor='#000000' onload='focus()' onClick='self.close()'>");
NewWindow.document.write ("<table align='center' border='0' height='100%' width='100%'><tr>");
NewWindow.document.write ("<td align='center' valign='middle' width='100%'>");
NewWindow.document.write ("<table border='0' bgcolor='#000000' cellpadding='0' cellspacing='1'><tr><td align='center'>");
NewWindow.document.write ("<img src=");
NewWindow.document.write (Picture);
NewWindow.document.write (" border='0'");
NewWindow.document.write (" onClick='self.close()'>");
NewWindow.document.write ("</td></tr></table>");
NewWindow.document.write ("</td></tr><tr>");
NewWindow.document.write ("<td align='center' valign='top'>");
NewWindow.document.write ("<center><form> <input name="button" style="font-family: Verdana; font-size: 10px" type="button" onClick="javascript:self.print();" value="Drucken"> <input type='button' value='FENSTER SCHLIESSEN' style='font-family: Verdana; font-size: 10px' onClick='self.close()'>");
NewWindow.document.write ("</form></td></tr></table>");
NewWindow.document.write ("</body></html>");
NewWindow.document.close();
NewWindow.resizeTo(xsize,ysize);
}
// end hiding from old browsers -->
Und hier der Aufruf aus deinem HTML (Galerie)-File:
<!-- Hier erst mal das Scipt mit einbinden -->
<script language="JavaScript" src="/php/OpenNewWindow.js" type="text/javascript"></script>
<a href="bildverzeichnis/bild.jpg" onClick="OpenNewWindow(this.href,500,300);return false;" target="_blank"><IMG alt="Hier der Alternativ-Text" src="bildverzeichnis/bild.jpg" border="0"></A>
usw....
Wichtig: Wenn einer kein JS aktiviert hat, funktioniert trotzdem noch der Link. Dann wird das Bild in nem neuen Fenster geöffnet. Diese Beispiel wäre jetzt 300px breit und 500px hoch. Ich hab alle meine Bilder auf 300x500 bzw. 500x300 gemacht und dann beide Seitenlängen des neuen Fensters gleich groß gemacht (500x500). Ist einfacher, dann die Galerie zu bauen....
So. Normalerweise baut man hier solche Script selbst, aber warum das Rad täglich neu erfinden!
Ach noch was. Das Script schließt das Fenster auch dann, wenn Du einfach aufs Bild klickst!
Greets Tom1tk