"Saubere" pop-up Variante? (eine, die nicht geblockt wird)

[Petra1979]

Hallo,
ich hätte einige Fragen, bin trotz SUFU und google nicht fündig geworden und wende mich nun an Euch.


Ziel: Ich muss kleine Vorschaubilder per Maus-click in einem neuen Fenster größer darstellen (es gibt jeweils 2 Bilder, ein thumb und ein größeres).

Vorgabe:
1) Es soll trotz pop-up-blocker und evtl. deaktiviertem javascript funktionieren.
2) Die Fenstergröße soll (wenn mögl. automatisch) der Bildgröße entsprechen.
3) Sämtliche Leisten (auch scrollbars) sollten ausgeblendet sein.
4) Das Fenster soll per click wieder geschlossen werden und ebenso, wenn man ein anderes thumbnail anklickt (und sich dadurch ein neues Fenster öffnet).
Zusatzaufgabe:
5) Der layer soll im browserfenster mittig geöffnet werden
6) Text über dem Bild wäre auch fein.

Vermutung: Ich muss das mit layern umsetzen und brauche doch javascript. Habe schon begonnen mich mit layern auseinanderzusetzen (Punkt 3 u. 4 wären somit abgehakt ;-), scheitere aber u.a. daran, dass das Bild im Firefox nicht mittig dargestellt wird (als Hintergrundbild). Füge ich das Bild 'normal' ein, ist es mittig aber dann kann ich keinen Text darüber legen.

Verwende Dreamweaver und versuche CSS zu durchblicken.

Danke für Eure Hilfe.

[walter]

Willkommen im TP "Jahrgangsgenossin"!

1) Es soll trotz pop-up-blocker und evtl. deaktiviertem javascript funktionieren.

Kein JavaScript aktiviert - kein echtes Popup, so einfach. Du kannst ohne JavaScript und mit üblichen Mitteln nur per HTML (target="_blank") ein neues Browserfenster öffnen lassen, dieses kannst Du dann aber nicht manipulieren (Größe bestimmen, Leisten ausblenden usw.)

2) Die Fenstergröße soll (wenn mögl. automatisch) der Bildgröße entsprechen.

Nur mit JavaScript möglich!

3) Sämtliche Leisten (auch scrollbars) sollten ausgeblendet sein.

Nur mit JavaScript möglich!

4) Das Fenster soll per click wieder geschlossen werden und ebenso, wenn man ein anderes thumbnail anklickt (und sich dadurch ein neues Fenster öffnet).

Schließen kannst du, mal abgesehen von einem "normalen" Klick auf das schöne kleine Kreuzchen oben rechts usw., auch nur anders erzwingen indem du JavaScript verwendest.

5) Der layer soll im browserfenster mittig geöffnet werden

Auch wieder JavaScript.

6) Text über dem Bild wäre auch fein.

Das sollte wohl das kleinste Problem werde.

Was verstehst Du genau unter Layern und was hat das mit JavaScript zu tun. Versteh ich nicht ganz. Du wirst die Layer aus Dreamweaver meinen oder?

Verwende Dreamweaver und versuche CSS zu durchblicken.

CSS hat mit Deinem Problem nur bedingt etwas zu tun. CSS ist rein für das Design und Positionierungen zuständig. Am Besten generell mal Onlinebeispiel oder exaktes Problem hier posten. Ich habe jetzt doch alles sehr allgemein beschrieben.

[webcreate]

Also von der Ebene (Layer) Verison würde ich mich trennen.
JavaScript läuft nun mal Clientseitig und kann so nicht einfach dynamisch Daten nachladen.
Spricht es müssten zuvor alle Bilder in Ebenen geladen worden sein und dann mit visible:hidden ausgeblendet werden.
Die könnte man dann mit den JavaScript MM_showHideLayers() (hat DW onBoard) sichtbar machen.
Das kann bei einer gewissen Anzahl an Bildern aber schon gut dauern.
Sollte es es Möglichkeit geben die DIVs dyn mit Inhalt, also hier Bildern zu beschreiben, würde mich das auch mal interessieren.

[webcreate]

Da ja nun klar ist, das man JavaScript braucht....
Ich hatte da einen Einfall und hab es mal probiert... es geht.
Man benötigt aber PHP auf dem Server!

Funktion:
Als Unterverzeichnis des Scriptes erzeug man die Odner "images" und "thumbs".
In images werden die großen Fotos abgelegt und in thumbs die Thumbnails.
Die Thumbnails sollten bei Querformat eine Breite von max 120px haben und bei Hochformat eine Höhe von max 120px.
Das Verzeichnis wird automatisch ausgelesen.
Duch die Breitenangabe im Code des ersten DIVs (hier: <div style="width:500px;">) bestimmt man wieviele Thumbs pro Reihe erscheien.
Also wie oft passen 120px in diese Breite?
Klickt man nun auf ein Thumb, erscheint mittig das Bild, klickt man auf das Bild ist es wieder weg.
Klickt man bei "aktivem" Bild auf ein anderes, erscheint dieses, hierbei kann ruhig zwischen Hoch- und Querformat gewechselt werden.

Hier ein Beispiel

Soviel zur Funktion, hier nun der Code:

PHP-Code:

<html>
<head>
<title></title>
<script type="text/javascript" language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<?
if($_GET){
    $size = getimagesize($_GET['image']);
    $file_x = $size[0];
    $file_y = $size[1];
    echo <<< END
    <script type="text/javascript" language="JavaScript">
    var sbreite,shoehe,b,h,x,y;

    var ns6 = (!document.all && document.getElementById);
    var ie4 = (document.all);
    var ns4 = (document.layers);

    if(ns6||ns4) {
        sbreite = innerWidth;
        shoehe = innerHeight;
    }
    else if(ie4) {
        sbreite = document.body.clientWidth;
        shoehe = document.body.clientHeight;
    }

    x = (sbreite-$file_x)/2;
    y = (shoehe-$file_y)/2;
    
    document.write('<div id="bild" style="border:1px #000000 solid;position:absolute;top:'+y+'px;left:'+x+'px;width=$file_x px;height=$file_y px;"><a href="javascript:MM_showHideLayers(\'bild\',\'\',\'hide\');"><img src="$_GET[image]" width="$file_x" height="$file_y" border="0"></a></div>');
    </script>
    <noscript>
    <div id="bild" style="border:1px #000000 solid;position:absolute;top:0px;left:0px;width=$file_x px;height=$file_y px;"><a href="$_SERVER[PHP_SELF]"><img src="$_GET[image]" width="$file_x" height="$file_y" border="0"></a></div>
    </noscript>
END;
}
$handle=opendir("thumbs");
while($file = readdir($handle)){
    if(!is_dir($file)){
        $f[]=$file;
        $th_size = getimagesize("thumbs/".$file);
        $th_x[] = $th_size[0];
        $th_y[] = $th_size[1];
    }
}
closedir($handle);
$counter = 0;
?>
<div style="width:500px;">
<?foreach($f as $files) {
    echo "<div style=\"float:left;width:120px;height:120px;text-align:center;margin:2px;background-color:#666666;\"><a href=\"$_SERVER[PHP_SELF]?image=images/$files\"><img src=\"thumbs/$files\" width=\"$th_x[$counter]\" height=\"$th_y[$counter]\" border=\"0\"></a></div>";
    $counter++;
}
?>
</div>
</body>
</html>

[Stuck Mojo]

sowas in der Art hatten wir vor ein paar Tagen: http://www.traum-projekt.com/forum/s...d.php?p=533753 ...Das Script öffnet auch ein neues Fenster bei ausgeschaltetem JavaScript.

Gruss
Jan

[webcreate]

Da fällt mir doch ein, es gibt ja noch einen noscript Tag
Habe das Script oben nun abgeändert.
Wenn JavaScript aktiv ist, wird die Ebene mit dem Foto mittig angezeigt und wenn JavaScript deaktiviert ist, wird die Ebene mit dem Foto auf x=0 und y=0 angezeigt.
Die Position für JavaScript deaktiviert kann man natürlich auch anders setzten bsp 50/50.
Auch bei der JS deaktivierten Version wirb beim Klick auf das Bild die Ebene deaktiviert.

Der Unterschied zur Version von Jan ist die, das ich kein neues Fenster öffnen lasse, sonder die Fotos in einer Ebene darstellen lass.

[Petra1979]

Danke für das herzliche Willkommen, die rasche Beantwortung und das tolle script, das mir ca. 20 versteckte layer erspart .

Ich werde später Stellung nehmen, will jetzt einfach nur weg om PC weil ich bis jetzt an den gestern geschossenen Fotos gebastelt habe. Die mini-gallery 'steht' mal probeweise (ohne vertikaler thumb Zentrierung ;-)

ty, nn!


EDIT:

Was verstehst Du genau unter Layern und was hat das mit JavaScript zu tun. Versteh ich nicht ganz. Du wirst die Layer aus Dreamweaver meinen oder?

Ja, meine die layer, die man mit dem DW recht einfach erzeugen kann. Hätte im Prinzip pro Bild einen layer erstellt, der das vergrößerte Foto beinhaltet und auf hidden gesetzt wäre. Nachdem ich wollte, dass user, die js deaktiviert haben auch in den Genuß der vergrößerten Fotos kommen sollen dachte ich, dies geht nur mittels layer.

@ webcreate: Danke, dass Du ein script geschrieben hast - die Bilder in einem layer zu öffnen finde ich sehr elegant. Ich war so frech und habe es gleich verwendet weil es mir gefallen hat und ich es selbst nicht so gut umsetzen hätte können. Bin sogar daran gescheitert die thumbs im Querformat vertikal zu zentrieren ...

FRAGE:
Wieso ist im Firefox das Hintergrundbild nicht mittig, wenn ich es per CSS so definiere (im IE funktioniert es):

.layer-map {font-size: 1px; background-attachment: fixed;
background-image: url(images/map.gif); 
background-repeat: no-repeat; background-position:50% 50%}

Danke

[Petra1979]

Nachtrag:
1) Habe den Script-Teil in eine Tabelle gesetzt, weil wenn man das nicht macht und Text darunter anfügt, dann ordnet der Firefox den Text rechts neben den Thumbs an.

2) Die Thumbs vertikal zu zentrieren ist mir ebensowenig geglückt wie die Layer mit den Fotos rechtsbündig erscheinen zu lassen.

3) Meine eigentliche Frage bezog sich auf das Design, dass ich unten angehängt habe - leider kann ich das script nicht so adaptieren, dass es dafür passen würde aber dafür habe ich jetzt eine tolle Gallerie.

Danke!
PS: Witzig, wie hier bewertet wird ...

[webcreate]

So hier mal ein Update zur vert. und hor. Zentrierung und das der Text unter die Thumbübersicht kommt.
Aber in deinem Posting #8 Frage 2 und 3 raff ich nicht so ganz..... was meinen

Udate:

PHP-Code:

<html>
<head>
<title></title>
<script type="text/javascript" language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<?
if($_GET){
    $size = getimagesize($_GET['image']);
    $file_x = $size[0];
    $file_y = $size[1];
    echo <<< END
    <script type="text/javascript" language="JavaScript">
    var sbreite,shoehe,b,h,x,y;

    var ns6 = (!document.all && document.getElementById);
    var ie4 = (document.all);
    var ns4 = (document.layers);

    if(ns6||ns4) {
        sbreite = innerWidth;
        shoehe = innerHeight;
    }
    else if(ie4) {
        sbreite = document.body.clientWidth;
        shoehe = document.body.clientHeight;
    }

    x = (sbreite-$file_x)/2;
    y = (shoehe-$file_y)/2;
    
    document.write('<div id="bild" style="border:1px #000000 solid;position:absolute;top:'+y+'px;left:'+x+'px;width=$file_x px;height=$file_y px;"><a href="javascript:MM_showHideLayers(\'bild\',\'\',\'hide\');"><img src="$_GET[image]" width="$file_x" height="$file_y" border="0"></a></div>');
    </script>
    <noscript>
    <div id="bild" style="border:1px #000000 solid;position:absolute;top:0px;left:0px;width=$file_x px;height=$file_y px;"><a href="$_SERVER[PHP_SELF]"><img src="$_GET[image]" width="$file_x" height="$file_y" border="0"></a></div>
    </noscript>
END;
}
$handle=opendir("thumbs");
while($file = readdir($handle)){
    if(!is_dir($file)){
        $f[]=$file;
        $th_size = getimagesize("thumbs/".$file);
        $th_x[] = $th_size[0];
        $th_y[] = $th_size[1];
    }
}
closedir($handle);
$counter = 0;
?>
<div style="width:500px;clear:left;">
<?foreach($f as $files) {
    echo "<div style=\"float:left;width:120px;height:120px;margin:2px;background-color:#666666;\"><a href=\"$_SERVER[PHP_SELF]?image=images/$files\"><div style=\"width:120px;height:120px;display:block;margin:0 auto;background-image:url(thumbs/$files); background-repeat:no-repeat;;background-position:center center;\"></div></a></div>";
    $counter++;
}
?>
</div>
<div style="clear:left;">
Hier kommt dann der Content-Text rein.<br>
Denn mit Tabellen wollen wir nicht anfangen ;-)
<div>
</body>
</html>

[Petra1979]

<div>Hier kommt dann der Content-Text rein. Denn mit Tabellen wollen wir nicht anfangen ;-)</div>

.

Danke für das neue script Mark, der content ist jetzt auch im Firefox dort, wo er hingehört. Allerdings ist es seltsam, dass die thumbs im IE 6 beim schnellen drüberfahren kurzzeitig immer ausgeblendet werden ('verschwinden'). Die Maushand, die anzeigt, dass es etwas zum anklicken gibt erscheint beim mouseover über den thumbs NUR im Firefox. Manchmal bockt das eine oder andere Bild auch im Firefox und beim mouseover erscheint nicht das weiße Händchen.


ad 2) Die thumbs vertikal zu zentrieren ist Dir gelungen - was ich zusätzlich gemeint habe war, ob man die vergrößerten Bilder anstatt mittig auch rechtsbündig im Browserfenster erscheinen lassen könnte? Hintergedanke: Hat man nur ca. 4-6 thumbs pro Zeile ist der rechte Browserteil ungenützt und dort könnte man die vergrößerten Bilder einblenden.


ad 3) Die Frage mit der ich den thread eröffnet habe bezieht sich auf das oben angehängte design. D.h. es sind ca. 20 Bilder in einer Spalte neben einem Text angeordnet und die wollte ich vergrößert in einem neuen Fenster oder Ebene darstellen. Am besten ohne JS, falls es user deaktiviert haben. Dynamisch schaffe ich das nicht - was ich bisher umgesetzt habe war, dass ich pro vergrößertem Bild eine .htm Datei per Javascript geladen habe - das ist unschön und ein gefundenes Fressen für popup blocker - bzw. Ad-Watch (trotz window.open).
Fein wäre es, wenn man beim Klicken den Dateinamen weitergibt und eine Funktion aufruft, die in einem gewissem Verzeichnis das Vergrößerte Bild in einer neuen Ebene lädt, so oder so ähnlich könnte es ja dynamisch funktionieren - ohne 20 zusätzlicher .htm Dateien mit Fotos darin .

Danke!

[webcreate]

So, dann hier nochmals eine Version mit Spaltendesign und das die gr. Fotos rechts angezeigt werden.
Auch im IE ist nun ein Hand-Cursor da
Bei deaktiviertem JS erscheinen die Bilder immer noch links oben.

PHP-Code:

<html>
<head>
<title></title>
<script type="text/javascript" language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<?
if($_GET){
    $size = getimagesize($_GET['image']);
    $file_x = $size[0];
    $file_y = $size[1];
    echo <<< END
    <script type="text/javascript" language="JavaScript">
    var sbreite,shoehe,b,h,x,y;

    var ns6 = (!document.all && document.getElementById);
    var ie4 = (document.all);
    var ns4 = (document.layers);

    if(ns6||ns4) {
        sbreite = innerWidth;
        shoehe = innerHeight;
    }
    else if(ie4) {
        sbreite = document.body.clientWidth;
        shoehe = document.body.clientHeight;
    }

    x = (sbreite-$file_x);
    y = (shoehe-$file_y)/2;
    
    document.write('<div id="bild" style="border:1px #000000 solid;position:absolute;top:'+y+'px;left:'+x+'px;width=$file_x px;height=$file_y px;"><a href="javascript:MM_showHideLayers(\'bild\',\'\',\'hide\');"><img src="$_GET[image]" width="$file_x" height="$file_y" border="0"></a></div>');
    </script>
    <noscript>
    <div id="bild" style="border:1px #000000 solid;position:absolute;top:0px;left:0px;width=$file_x px;height=$file_y px;"><a href="$_SERVER[PHP_SELF]"><img src="$_GET[image]" width="$file_x" height="$file_y" border="0"></a></div>
    </noscript>
END;
}
$handle=opendir("thumbs");
while($file = readdir($handle)){
    if(!is_dir($file)){
        $f[]=$file;
        $th_size = getimagesize("thumbs/".$file);
        $th_x[] = $th_size[0];
        $th_y[] = $th_size[1];
    }
}
closedir($handle);
$counter = 0;
?>
<div style="width:530px;">
<?
$counter = 0;
foreach($f as $files) {
    $counter++;
    echo "<div style=\"float:left;margin:2px;background-color:#cccccc;width:400px;min-height:120px;height:auto !important;height:120px;\">Ich bin der Blindtext zum Bild $counter</div><div style=\"float:left;width:120px;height:120px;margin:2px;background-color:#cccccc;\"><a href=\"$_SERVER[PHP_SELF]?image=images/$files\"><div style=\"width:120px;height:120px;display:block;margin:0 auto;background-image:url(thumbs/$files);background-repeat:no-repeat;background-position:center center;cursor: hand;\"></div></a></div>";
}
?>
</div>
<div style="clear:left;">
Hier kommt dann der Content-Text rein.<br>
Denn mit Tabellen wollen wir nicht anfangen ;-)
<div>
</body>
</html>