Popupwindow mit autogrössenanpassung

C

casimir

Mitglied
Hallo allerseits,

ich habe ein kleines Problem. Ich möchte in meiner Seite diverse Bilder per popup laden, diese sind nicht auf einer HTML Seite sondern liegen als Bild vor. Ich benutze dazu folgenden Aufruf:

<a href="#" onClick="window.open('01.jpg', 'fenster1','toolbar=no,status=no,resize=yes,menubar=no,scrollbars=yes')">Vivissimo</a>


Das funktioniert auch soweit, nur wäre es wünschenswert dass die Grösse des Fensters sich automatisch an dass Bild anpasst und zwar randlos, ist dass machbar?


Vielen Dank i.v.


Grüße

Christian
 
Das ist machbar, z.B. hiermit:
Code: 
<script type="text/javascript">
<!--
var pop;
function resizeMe()
{
imgW=pop.document.images[0].width;
imgH=pop.document.images[0].height;
if(document.all&&!window.opera)
	{
	   popW=pop.document.body.offsetWidth;
	   popH=pop.document.body.offsetHeight;
	}
else
	{
	  popW=pop.innerWidth;
	  popH=pop.innerHeight;
	}
resX=parseInt(imgW-popW);
resY=parseInt(imgH-popH);
pop.resizeBy(resX,resY);
pop.focus();
}
function popup(lnk,titel)
{
pop=window.open('','fenster','scrollbars=no');
pop.document.open();
pop.document.write('<html><head><title>'+titel+'</title></head><body onload="opener.resizeMe()"marginheight="0"marginwidth="0"><img src="'+lnk.href+'"border="0"style="position:absolute;top:0px;left:0px;"></body></html>');
pop.document.close();
}
//-->
</script>
Der dazugehörige Link muss dann so aussehen:
Code: 
<a href="01.jpg" onClick="popup(this,'Vivissimo');return false;">Vivissimo</a>

als ersten Parameter gibst du immer "this" an, als 2ten den Titel, welcher im Fenster erscheinen soll.
Das Skript öffnet zuerst das Popup, falls noch nicht vorhanden.
Dann schreibt es den Code für eine HTML-Seite in dieses Fenster, incl. dem Bild, welches in der Seite "absolute" positioniert wird, damit kein Rand erscheint.
Ist die Seite im Popup geladen, ruft sie die Funktion resizeMe() im Elternfenster auf, welche im Popup Fensterinnengrösse mit Bildgrösse vergleicht und die Fenstergrösse dementsprechend anpasst.

Je nach Browser kann es zu kleinen Abweichungen kommen, bei meinem IE fehlen z.B. ca2px vom Bild.
 
Vielen Dank für deine promte Antwort,

also soll ich dass so verstehen, ich muss extra jedes bild in eine HTML seite einbinden und für jeden Link eine Extra Javascriptprozedur einfügen, ich will auf diese Weise schlieslich nicht nur ein Bild einbinden, dass wird, insb. bei wechselden Inhalten eine Heidenarbeit. Ich weiss dass es einen einfacheren einzeiligen js-Aufruf gibt, der eine randlose Anpassung ermöglicht, hatte diesen schon mal in der Hand, kann es leider nicht mehr finden...schnieff

Danke noch mal

Die besten Grüße


Christian
 
Also bei mir funktionierrts jedenfalls auch ohne dass ich die bilder in HTML einbinde. Auch mehere links kann ich aufrufen. Wenn ich allerdings durch Anklicken verschiedener Links mehere popups aufgehen lassen möchte, muss ich dann oben im JS alles so oft definieren so oft wie ich popuplinks habe oder gibt es da eine einfache Lösung?


Gruss

noch ma


Christian
 
Warum jedes Bild in eine HTML-Datei einfügen?

Du musst nur das Skript in die Seite packen, und deine Bilder verlinken.... egal wieviele Bilder es sind, du musst den entsprechenden Link immer nur erweitern um
Code: 
onClick="popup(this,'Titel');return false;"
Wenn dir das zu viel Aufwand ist, tut es mir leid, dann musst du wohl deinen Einzeiler weitersuchen.... viel Spass dabei:-)
 
re

Ja ich glaube ich hatte dich da falsch verstanden

du hast geschrieben:
"Dann schreibt es den Code für eine HTML-Seite in dieses Fenster, incl. dem Bild, welches in der Seite "absolute" positioniert wird, damit kein Rand erscheint"

Egal es funktioniert ja jetzt, auch mit meheren Links, aber was muss ich ändern damit verschiedene Links in immer neue Fenter geöffnet werden


Gruß


Christian
 
bei mir klappts leider nich so...

hi bei mir klappts leider nich so ...ich habe nen kleines bild man soll drauf klicken und dann soll ein neues fenster geöffnet werden mit de rgrösse vom grösseren bild....

das habe ich bisher:

Code: 
 <a target="_blank" href="http://www.geocities.com/broly007de/pension_heide/Bett.jpg">
      <img border="0" src="http://www.geocities.com/broly007de/pension_heide/Bettmin.jpg" width="133" height="100"></a>

vielleicht kann man mir ja helfen wär nett
 
Zuletzt bearbeitet von einem Moderator:
Hast du dir den Thread auch angeschaut und fleißig gesucht?
Code: 
<script type="text/javascript">

function openImage(a_sImage, a_iWidth, a_iHeight)
{
    window.open(a_sImage, '_blank', 'width=' + a_iWidth + ',height=' + a_iHeight + ',location=no,menubar=no,resizable=no,scrollbars=no,' +
                                     'status=no,toolbar=no');
}

</script>

<a href="bild.png" onclick="openImage(this.href, 200, 300);return false;"><img src="bild_thumb.png"
   style="width:30px;height:50px;border-width:0px;" /></a>
<br />
<a href="bild2.png" onclick="openImage(this.href, 200, 300);return false;"><img src="bild2_thumb.png"
   style="width:30px;height:50px;border-width:0px;" /></a>
<br />
<a href="bild2.png" onclick="openImage(this.href, 200, 300);return false;"><img src="bild2_thumb.png"
   style="width:30px;height:50px;border-width:0px;" /></a>
Und falls du den Wunsch bekommen solltest, dass keine weißen Ränder im
PopUp erscheinen, dann such bitte, das hatten wir schon mehr als oft genug.
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück