PopUps bei Galerie sollen sich der größe anpassen

[lofot]

Hallo,

ich habe folgendes Problem, ich habe eine Galerie erstellt, in der sich Waagerechte und Hochkant-Fotos befinden.

Durch klick auf das Thumbnail öffnet sich ein Popup mit dem Bild zum Beispiel wie gewünscht im Hochkantformat. Wenn ich das Popup nicht schließe, sondern auf das nächste Waagerechte Thumbnail klicke, wird das schon geöffnete PopUp neu geladen und darin das waagerechte Bild geladen, allerdings fehlt jetzt ein Teil des Bildes und unten ist noch die Länge des Hochkantfotos zu sehen.

Wie schaffe ich das jeweils die größe des Popups automatisch angepasst wird, auch wenn das Popup nicht geschlossen wird:

Hier der Quellcode der Galerie-Seite:
<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=385,height=470,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze01_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=468,height=368,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen01.jpg" width="100" height="75"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze02_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=385,height=470,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen02.jpg" width="75" height="100"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze03_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=385,height=470,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen03.jpg" width="75" height="100"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze04_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=468,height=368,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen04.jpg" width="100" height="75"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze05_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=468,height=368,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen05.jpg" width="100" height="75"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze06_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=468,height=368,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen06.jpg" width="100" height="75"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze07_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=467,height=368,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen07.jpg" width="100" height="75"></p>

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze08_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=467px,height=368px,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen08.jpg" width="100" height="75"></p>

Danke schon mal für Eure Hilfe!

[WauWau]

Hallo,

ich habe dein komisches unübersichtliches script nicht gesamt gelesen, hier mal ein auszug:

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=385,height=470,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100"></p>

Du bist dir darüber im klaren, dass du da absolute, absolute Traffic-Verschwendung bei allen verschwendeten machst? Außerdem werden wartungsarbeiten hier zur hölle?

Frage: Warum nicht umständlich wenn es auch einfach geht? Antwort: Weil wir's noch nicht können!?

Also, du hast da einen <p>, wo der inhalt _überall_ center sein soll. Das lösen wir am besten per CSS, wir weisen einfach jedem <p> ein text-align:center; zu. Und zwar im <head>:

<style type="text/css">
<!--
  p { text-align: center; }
-->
</style>

So, dann haben wir einen Link: bei onclick weist du einer Variable ein Fensterhandle zu, schreibst in den 3.parameter von der window-methode open() standart-voreingestellte-werte, die unsinnig sind, und machst danach ein unsinniges "return false;".

<a href="#" onClick="NewWindow=window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=385,height=470,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100">

Außerdem ist dies unvalides HTML: Dein <a>-Tag wird nach dem <img>-Tag nicht geschlossen!

So, abgespeckte version:

<a href="#" onClick="window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'width=385,height=470,left=100,top=90');"><img ...></a>

Behoben wurde das invalide HTML, und auch noch die zuweisung des window-handles der variable. Dir dürfte klar sein, dass du die ganze zeit immer nur mit _einem_ neuen Fenster rummachst?

Da ich davon ausgehe, dass du mit dem Fenster danach sowieso nichts mehr machen willst, lassen wir doch die Variablenzuweisung einfach weg, und schon öffnet er uns immer neue fensterchen.

Das ganze geht natürlich auch noch viel, viel abgespeckter. Du könntest eine Funktion schreiben:

function galerie(url, breite, hoehe)
{
  window.open(url, 'NewWindows', 'width="+breite+",height="+hoehe+"left=100,top=90');
}

Und brauchst dann nur noch <a href="#" onClick="galie('../popups/....', 385, 470);"><img></a> schreiben. Besser, was?

WauWau

[lofot]

puuh, ich merke das ich da noch viel nachholbedarf habe, ich danke dir für deine Mühe, ich muss mir das jetzt mal zu gemüte führen....

Vielen vielen Dank
Gruß lofot

Hallo,

ich habe dein komisches unübersichtliches script nicht gesamt gelesen, hier mal ein auszug:

<p align="center"><a href="#" onClick="NewWindow=window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=385,height=470,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100"></p>

Du bist dir darüber im klaren, dass du da absolute, absolute Traffic-Verschwendung bei allen verschwendeten machst? Außerdem werden wartungsarbeiten hier zur hölle?

Frage: Warum nicht umständlich wenn es auch einfach geht? Antwort: Weil wir's noch nicht können!?

Also, du hast da einen <p>, wo der inhalt _überall_ center sein soll. Das lösen wir am besten per CSS, wir weisen einfach jedem <p> ein text-align:center; zu. Und zwar im <head>:

<style type="text/css">
<!--
  p { text-align: center; }
-->
</style>

So, dann haben wir einen Link: bei onclick weist du einer Variable ein Fensterhandle zu, schreibst in den 3.parameter von der window-methode open() standart-voreingestellte-werte, die unsinnig sind, und machst danach ein unsinniges "return false;".

<a href="#" onClick="NewWindow=window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=385,height=470,left=100,top=90'); return false; "><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100">

Außerdem ist dies unvalides HTML: Dein <a>-Tag wird nach dem <img>-Tag nicht geschlossen!

So, abgespeckte version:

<a href="#" onClick="window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'width=385,height=470,left=100,top=90');"><img ...></a>

Behoben wurde das invalide HTML, und auch noch die zuweisung des window-handles der variable. Dir dürfte klar sein, dass du die ganze zeit immer nur mit _einem_ neuen Fenster rummachst?

Da ich davon ausgehe, dass du mit dem Fenster danach sowieso nichts mehr machen willst, lassen wir doch die Variablenzuweisung einfach weg, und schon öffnet er uns immer neue fensterchen.

Das ganze geht natürlich auch noch viel, viel abgespeckter. Du könntest eine Funktion schreiben:

function galerie(url, breite, hoehe)
{
  window.open(url, 'NewWindows', 'width="+breite+",height="+hoehe+"left=100,top=90');
}

Und brauchst dann nur noch <a href="#" onClick="galie('../popups/....', 385, 470);"><img></a> schreiben. Besser, was?

WauWau

[Frodo]

Alles Kockolores !!

<html>
<script language="javascript">
var win;
function fenster(bild,xx,yy)
{
win=window.open (bild,"fenstername","width=200,height=200,left=200,top=200");
win.resizeTo (xx,yy);
win.focus();
}
</script>
<body onunload="win.close()">
<a href="javascript:fenster('bild_1.gif','100','100')">Bild 1</a><br>
<a href="javascript:fenster('bild_2.gif','200','200')">Bild 2</a><br>
<a href="javascript:fenster('bild_3.gif','300','300')">Bild 3</a><br>
<a href="javascript:fenster('bild_4.gif','400','400')">Bild 4</a><br>
</body>
</html>

Hurrah !!

[lofot]

HILFE!!!

was denn nun?
ich hab leider wohl viel zu wenig Ahnung...

Mein Code sieht jetzt so aus, habe das geändert was ich verstanden habe, geht aber immernoch nicht richtig, was muss ich denn machen damit es geht? Was mache ich falsch?

<STYLE TYPE="text/css">
body, textarea {
scrollbar-base-color:#444444;
scrollbar-3d-light-color:#030036;
scrollbar-arrow-color:#FEAE30;
scrollbar-darkshadow-color:#030036;
scrollbar-face-color:#030036;
scrollbar-highlight-color:#030036;
scrollbar-shadow-color:#030036;
scrollbar-track-color:#C4C0FF;
}
<!--
  p { text-align: center; }
-->

</style>

</head>

<body bgcolor="#030036" topmargin="5" leftmargin="5" background="../images/leidenschaften_50.gif" bgproperties="fixed">

<p><a href="#" onClick="window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'width=385,height=470,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100"></a></p>

<p><a href="#" onClick="window.open('../popups/fotos/katze01_neu.htm', 'NewWindows', 'width=468,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen01.jpg" width="100" height="75"></a></p>

<p><a href="#" onClick="window.open('../popups/fotos/katze02_neu.htm', 'NewWindows', 'width=385,height=470,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen02.jpg" width="75" height="100"></p></a>

<p><a href="#" onClick="window.open('../popups/fotos/katze03_neu.htm', 'NewWindows', 'width=385,height=470,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen03.jpg" width="75" height="100"></p></a>

<p><a href="#" onClick="window.open('../popups/fotos/katze04_neu.htm', 'NewWindows', 'width=468,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen04.jpg" width="100" height="75"></p></a>

<p><a href="#" onClick="window.open('../popups/fotos/katze05_neu.htm', 'NewWindows', 'width=468,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen05.jpg" width="100" height="75"></p></a>

<p><a href="#" onClick="window.open('../popups/fotos/katze06_neu.htm', 'NewWindows', 'width=468,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen06.jpg" width="100" height="75"></p></a>

<p><a href="#" onClick="window.open('../popups/fotos/katze07_neu.htm', 'NewWindows', 'width=467,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen07.jpg" width="100" height="75"></p></a>

<p><a href="#" onClick="window.open('../popups/fotos/katze08_neu.htm', 'NewWindows', 'width=467,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen08.jpg" width="100" height="75"></p></a>

</body>

[Elya]

Hallo lofot,

was denn nun?
ich hab leider wohl viel zu wenig Ahnung...

kein Grund zur Panik, aber zum Lernen.

<p><a href="#" onClick="window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'width=385,height=470,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100"></a></p>

<p><a href="#" onClick="window.open('../popups/fotos/katze01_neu.htm', 'NewWindows', 'width=468,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen01.jpg" width="100" height="75"></a></p>

a) Lies Dir morgen mal in Ruhe den Link aus meinem anderen Posting durch.
b) Vorerst kannst Du als zweiten Parameter in der Klammer statt 'newWindows' mal jeweils einen anderen Namen vergeben, z.b. "katze01", "katze 02" etc.

Gruß aus Köln-Ehrenfeld,

Elya

[lofot]

Dank Dir, jetzt hab ich wieder was kapiert, OK ich wusste nicht das das prakisch die Bezeichnung für die/das PopUp/s ist/sind

Ich habe die Link bezeichnung von einem PopUp generator geholt.

Ich denke ich muss mir echt mal die Seite genauer ansehen.

Vielen Dank an Euch alle

Hallo lofot,

was denn nun?
ich hab leider wohl viel zu wenig Ahnung...
kein Grund zur Panik, aber zum Lernen.

<p><a href="#" onClick="window.open('../popups/fotos/katze00_neu.htm', 'NewWindows', 'width=385,height=470,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100"></a></p>

<p><a href="#" onClick="window.open('../popups/fotos/katze01_neu.htm', 'NewWindows', 'width=468,height=368,left=100,top=90')"><img border="0" src="../popups/thumbs/katzen01.jpg" width="100" height="75"></a></p>

a) Lies Dir morgen mal in Ruhe den Link aus meinem anderen Posting durch.
b) Vorerst kannst Du als zweiten Parameter in der Klammer statt 'newWindows' mal jeweils einen anderen Namen vergeben, z.b. "katze01", "katze 02" etc.

Gruß aus Köln-Ehrenfeld,

Elya

[Frodo]

Dies ist nur ein Beispiel-Code !
Muss halt noch entsprechend angepasst werden !
Schreib ja nicht deinen ganzen Quelltext um !!!
;o))

[Frodo]

Oooops !!
Die Hochkommata sind natürlich Unsinn :
Besser : ('bild_1.gif',100,100)...

[Elya]

Hallo ,

Das ganze geht natürlich auch noch viel, viel abgespeckter. Du könntest eine Funktion schreiben:

function galerie(url, breite, hoehe)
{
  window.open(url, 'NewWindows', 'width="+breite+",height="+hoehe+"left=100,top=90');
}

Und brauchst dann nur noch <a href="#" onClick="galie('../popups/....', 385, 470);"><img></a> schreiben. Besser, was?

...und wenn wir dann noch die Nicht-Javascript-Benutzer mit in unsere Überlegungen einbeziehen und in das href="../popups/..." schreiben und in den Funktionsaufruf als ersten Parameter ('this.href') und anschließend return false, sind alle glücklich:

<a href="../popups/seite.html" onClick="galerie('this.href', 385, 470);return false"><img border="0" src="../popups/thumbs/katzen00.jpg" width="75" height="100" alt="hier der alternativtext dann klappts auch mit dem validator"></a>

Überprüfen kannst Du diese hingehackten Tipps auf der wunderbar umfassenden Popup-Seite von molily: http://molily.de/javascript-popups

Gruß aus Köln-Ehrenfeld,

Elya

[WauWau]

Hi,

...und wenn wir dann noch die Nicht-Javascript-Benutzer mit in unsere Überlegungen einbeziehen und in das href="../popups/..." schreiben und in den Funktionsaufruf als ersten Parameter ('this.href') und anschließend return false, sind alle glücklich:

Mann, er scheint ein Anfänger zu sein, dann will ich ihn nicht gleich mit alternativ-Texten oder schlimmen returns schocken...

Überprüfen kannst Du diese hingehackten Tipps auf der wunderbar umfassenden Popup-Seite von molily: http://molily.de/javascript-popups

Danke für die nette beschreibung meiner Hilfe.
WauWau

[Elya]

Hallo WauWau,

Überprüfen kannst Du diese hingehackten Tipps auf der wunderbar umfassenden Popup-Seite von molily: http://molily.de/javascript-popups

Danke für die nette beschreibung meiner Hilfe.

nicht aufregen ;-) ich meinte mit "hingehackt" ausschließlich meine eigenen codeschnipsel - ich mach' nicht mehr jeden Tag JS, und poste  eigentlich lieber Links zu den entsprechenden Themen.

Gruß aus Köln-Ehrenfeld,

Elya

[WauWau]

Hi,

Danke für die nette beschreibung meiner Hilfe.
nicht aufregen ;-) ich meinte mit "hingehackt" ausschließlich meine eigenen codeschnipsel - ich mach' nicht mehr jeden Tag JS, und poste  eigentlich lieber Links zu den entsprechenden Themen.

Hmm - erstens wusste ich nichts von molilys seite und zweitens kenne ich nicht weißgottwieviele interressante webseiten auswendig. Dann leg' ich doch lieber selber kurz hand an, habe was persönlich zugeschnittenes und kann später darauf verweisen ;-) [alia "Damals, als ich noch WauWau hieß" ;-)]

WauWau

[Elya]

Hallo WauWau,

Hmm - erstens wusste ich nichts von molilys seite

die sollte man aber kennen ;-)

und zweitens kenne ich nicht weißgottwieviele interressante webseiten auswendig.

ich auch nicht, aber manche braucht man hier immer wieder...

Dann leg' ich doch lieber selber kurz hand an, habe was persönlich zugeschnittenes und kann später darauf verweisen ;-) [alia "Damals, als ich noch WauWau hieß" ;-)]

Ist zwar einerseits nett, andererseits vertippt man sich doch schnell mal oder es kommen halbgare Sachen raus (zumindest bei mir ;)) - und das Zeug steht dann im auch im Archiv (a là "der für immer archivierte Unsinn, den ich damals, als ich noch elya war, geschrieben habe ;-)")

Zumindest zu dem endlos durchgekauten Thema "Popup-Fenster" gibt es (im Archiv und anderswo) schon reichlich gutes Material, dem ich nichts hinzuzufügen habe.

Gruß aus Köln-Ehrenfeld,

Elya

[WauWau]

Hi,

Hmm - erstens wusste ich nichts von molilys seite
die sollte man aber kennen ;-)

'hab sie mir eben durchgeschaut - ist nicht so richtig umfangreich...

und zweitens kenne ich nicht weißgottwieviele interressante webseiten auswendig.
ich auch nicht, aber manche braucht man hier immer wieder...

Und du meinst, eine von tausenden von lektüren, wie man mit open() umgeht, wäre die wahre?

Dann leg' ich doch lieber selber kurz hand an, habe was persönlich zugeschnittenes und kann später darauf verweisen ;-) [alia "Damals, als ich noch WauWau hieß" ;-)]
Ist zwar einerseits nett, andererseits vertippt man sich doch schnell mal oder es kommen halbgare Sachen raus (zumindest bei mir ;)) - und das Zeug steht dann im auch im Archiv (a là "der für immer archivierte Unsinn, den ich damals, als ich noch elya war, geschrieben habe ;-)")

klar - absolut richtig....

Zumindest zu dem endlos durchgekauten Thema "Popup-Fenster" gibt es (im Archiv und anderswo) schon reichlich gutes Material, dem ich nichts hinzuzufügen habe.

klar - aber wenn man eben nicht die seite von molily kennt...

WauWau

[Elya]

Hallo WauWau,

Und du meinst, eine von tausenden von lektüren, wie man mit open() umgeht, wäre die wahre?

sagen wir mal so: wenn hier eine Frage zu window.open kommt, kann ich vermutlich davon ausgehen, daß der Fragende sich mit den tausenden Antworten im Netz a) nicht auseinandergesetzt hat b) sich in der Masse nicht orientieren konnte. Typ a) wird sich auch diese Seite nicht aktiv durchlesen, sondern sucht Fertigantworten, die er hier nicht findet; Typ b) braucht konkrete Hilfestellung, die ihm die Seite bietet. Sicher gibt es noch reichlich Lektüre zu dem Thema, ich finde die von molily eine der besseren; vor allem ist sie sowohl hilfreich als auch kritisch. Anfänger, die window.open unüberlegt und/oder unvollkommen einsetzen, sind mit der Seite gut bedient. Wer sie gelesen hat, kann sich auch selbständig weiter mit dem Thema beschäftigen.

klar - aber wenn man eben nicht die seite von molily kennt...

deshalb verlinke ich sie hier ja immer wieder ;-)

Gruß aus Köln-Ehrenfeld + ein schönes Wochenende

Elya

[WauWau]

Hi,

Und du meinst, eine von tausenden von lektüren, wie man mit open() umgeht, wäre die wahre?

sagen wir mal so: wenn hier eine Frage zu window.open kommt, kann ich vermutlich davon ausgehen, daß der Fragende sich mit den tausenden Antworten im Netz a) nicht auseinandergesetzt hat b) sich in der Masse nicht orientieren konnte. Typ a) wird sich auch diese Seite nicht aktiv durchlesen, sondern sucht Fertigantworten, die er hier nicht findet; Typ b) braucht konkrete Hilfestellung, die ihm die Seite bietet. Sicher gibt es noch reichlich Lektüre zu dem Thema, ich finde die von molily eine der besseren; vor allem ist sie sowohl hilfreich als auch kritisch. Anfänger, die window.open unüberlegt und/oder unvollkommen einsetzen, sind mit der Seite gut bedient. Wer sie gelesen hat, kann sich auch selbständig weiter mit dem Thema beschäftigen.

Ja, allgemein ist es ja bekannt, dass vor allem JavaScript/HTML/DHTML/sonstwas-Neulinge immer wieder gerne Fragen zu (billigen) Sachen stellen, die tausendfach im Netz und auch Archiv stehen.

klar - aber wenn man eben nicht die seite von molily kennt...
deshalb verlinke ich sie hier ja immer wieder ;-)

schreib doch einfach mal so was in deine sign wie....

--
Standartfragen-antworten (FAQ):
 - wie bekomme ich window.open() hin? [link.......
 - wie kann ich text zentriert in der Seite darstellen? <...
 - wieso funkzt document.write(); hier nicht? [link.....
 - ...

Gruß aus Köln-Ehrenfeld + ein schönes Wochenende

Hmmm - das Wochenende wird irgendwie ein bisschen stressig bei mir, muss noch 70 Seiten über 24 Tage abtippen, und darüberhinaus noch Vandalismus in einem Abrissgebäude beseitigen (war ich selbst gewesen ;-)>

WauWau

PS: Nicht das das hier jemand liest....

x-selfforum-archive: NO
 ;-)