Zur Navigation

Pop Up Problem ;-)

1 2003

Habe den Thread hier aus den Augen Verloren xD
Deswegen hier nochmal meine Frage^^
Wie kriege ich das bei dem script hin das er die Bilder nun Zentriert
anzeigt beim draufklicken? Und das im Pop up um dem Bild ein Rahmen von 5px ist!

Ps. Super Script im Übrigen!

Hier der Teil im Headbereich steht:
<script language="JavaScript">
<!--
var ns = (document.all)?false:true;
var browserVersion = parseFloat(navigator.appVersion );
PositionX = 100;
PositionY = 100;
defaultWidth  = 420;
defaultHeight = 420;
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;

function popup(imageURL){
if (isNN){imgWin=window.open('picture.php?picname='+imageURL,'',optNN);}
if (isIE){imgWin=window.open('picture.php?picname='+imageURL,'',optIE);}
}
//-->
</script>


picture.php
<html>
<head>
<title>D.A.S.K - Gallery</title>
 <script type="text/javascript">
   var isNN,isIE;
   if (parseInt(navigator.appVersion.charAt(0))>=4){
     isNN=(navigator.appName=="Netscape")?1:0;
     isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;
}
function reSizeToImage(){
     if (isIE) {
       window.resizeTo(100,100);
       width=100-(document.body.clientWidth-document.images[0].width);
       height=100-(document.body.clientHeight-document.images[0].height);
       window.resizeTo(width,height);
}
     if (isNN) {
       window.innerWidth=document.images["pic0"].width;
       window.innerHeight=document.images["pic0"].height;
}
}
</script>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no" onload="reSizeToImage();self.focus()" onblur="self.close()">
 <img id="pic0" border="1" name="pic0" src='./images/pics/<?=$_GET["picname"]?>'>
</body>
</html>

10.09.2006 00:06 | geändert: 10.09.2006 00:06

2 Jörg Kruse

EInen Rahmen kannst du mit der CSS-Eigenschaft border festlegen, zentrieren kannst du das Bild über ein text-align:center in einem übergeordneten Element, z.B.:

<div style="margin-top:100px; text-align:center"><img id="pic0" style="border:5px solid white" name="pic0" src='<?=$_GET["picname"]?>'></div>

10.09.2006 00:58 | geändert: 10.09.2006 00:59

3 2003

Dadurch wird doch aber das Pop-Up Fenster nicht Zentriert dargestelt oder? Sondern nur der Inhalt des Bildes im Popup.

Ich wollte Das Popup Fenster Zentriert haben.

10.09.2006 01:19

4 Jörg Kruse

Zum Zentrieren des Popups kannst du die Breite des Bildschirms abfragen (screen.width) - von dieser ziehst du die Breite des Popups ab und teilst die Differenz nochmal durch zwei und erhälst dadurch die linke Position des Popups

defaultWidth  = 420;
defaultHeight = 420;
PositionX = (screen.width - defaultWidth) / 2;
PositionY = 100;

10.09.2006 01:40 | geändert: 10.09.2006 01:45

5 2003

Mhh ich habe es mal getestet aber so wirklich klappt das nicht! Richtig Zentriert ist das Bild nicht. Gibt es da evtl noch ne andere Lösung?

10.09.2006 02:12

6 Jörg Kruse

In Firefox zentriert es einwandfrei. Im Internet Explorer würde es auch funktionieren, wenn das Popup nicht wieder anschließend über window.resizeTo auf 100px + Bildbreite zusammengestaucht wird - dann muss man natürlich auch die Position über eine ensprechendes window.moveTo nochmals verschieben:

    if (isIE) {
      window.resizeTo(100,100);
      width=100-(document.body.clientWidth-document.images[0].width);
      height=100-(document.body.clientHeight-document.images[0].height);
      window.resizeTo(width,height);
      PositionX = (screen.width - width) / 2;
      window.moveTo(PositionX,100);
}

10.09.2006 09:02 | geändert: 10.09.2006 09:04

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]