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

[webcreate]

Eigentlich ja Steffen, aber da es ja nur um die Ausrichtung rechts geht, kann man die linke Border vernachlässigen
Aber schön, dass du mit aufpasst
Und lass mir doch bitte mein "k" am Ende

[steffenk]

sry Mark - jetzt sollte es nicht mehr vorkommen (ein Freund von mir heisst Marc, und da passiert das automatisch)

[Petra1979]

Jetzt verstehe ich was es mit cursor: hand; und x = (sbreite-$file_x); auf sich hat .

a) Mit ausflippenden thumbs im IE meine ich, dass sie bei sehr schnellem Überfahren mit der Maus ein- und ausgeblendet werden. Probiere es einmal - fahre wild umher *g*.

b) Läßt es sich verhindern, dass der Bildname in der url (Adressleiste) übernommen bzw. angefügt wird? Finde es störend (z.b. falls die web page "gebookmarkt" wird).

c) Wieso gelangt man nach dem Öffnen eines Bildes wieder ganz nach oben auf der web page?

d) Danke für die Lösung per Array (die kann ich auch gebrauchen [nicht nur ich]), habe es allerdings anders gemeint, versuche jetzt besser zu beschreiben was ich meine.
Gezielt (aber nicht per script automatisiert) verteile ich thumbs an verschiedenen Stellen auf einer web page. Optimal wäre es, wenn man Deine layer-Lösung so umändern könnte, dass z.B. beim click auf ein thumb (thumbs/juhuu.jpg) der name (juhuu.jpg) übergeben wird, dann im images-Ordner (das größere Bild) juhuu.jpg ausgelesen, in einen layer verpackt und ausgegeben wird. Kurzform: Nimm Name vom geklicktem thumb, gehe in den images-Ordner, nimm das Bild das dem geklicktem thumb-Namen entspricht und gib es in einem layer aus.
Habe keine Ahnung von php - wollte nur irgendwie vermitteln wie ich es gemeint habe.


Und ja, irgendwann gibt auch die Pezi mal Ruh'

[brans]

Wäre es nicht noch zusätzlich möglich, wenn sowieso schon JavaScript im Einsatz ist, dass man noch einen Preloader für die Bilder einfügt? Habe mich jetzt aus Zeitgründen noch nicht mit diesen Teilen beschäftigt, habe diese aber schon öfters gesehen. Ich könnte mir durchaus vorstellen, dass das den nicht ganz versierten Nutzern mit etwas kleinerer Leitung oder bei der Anzeige von grossen Bildern eine beachtliche Hilfestellung sein könnte.

etwa sowas: http://www.london-net.net/javascript...otscripts.html

Ich denke das einzige Problem dabei wäre, man müsste dann also beim Klick auf ein Bild zunächst das preloader-javascript für das entsprechende Bild starten, anstatt direkt das Bild anzuzeigen, oder?

Also quasi so:
1. Das Bild per Query string übergeben
2. Auslesen, DIV sichtbar machen und Preloader starten
3. Bild anzeigen

Es wäre eine kleine Spielerei und würde die Ladezeit nicht verkürzen, habe aber mal irgendwo in nem schlauen Buch gelesen, dass die User i.d.R. länger auf der Seite bleiben, wenn es während längeren Ladezeiten etwas zu sehen gibt.

[Petra1979]

Für Leute wie mich, die von PHP, JS & Co. keine Ahnung haben gibt es eine ganz einfache Möglichkeit um die user mit extrem langsamer I-Net-Anbindung nicht zu verlieren.

In dem sich öffnenden Fenster oder layer legt man ein Hintergrundbild an auf dem z.B. 'loading image' steht (gif, möglichst klein, also wenig Farben) und das eigentliche Bild erscheint dann (wenn geladen) im Vordergrund. Das ist schon wieder so einfach, dass ich es hier eigentlich nicht erwähnen hätte müssen nehme ich an .

Wäre jemand so nett und die Fragen a) bis d) zu erörtern - VIELEN DANK!

[webcreate]

Keinen Stress
a) Bei mir nicht... keine Ahnung
b) ja geht, mit .htaccess und rewriterules
c) Weil die Page neu geladen wird und die Ebene wird dort positioniert, da die Höhe der Auflösung ausgelesen wird... mal schauen was da noch geht.
d) geht auch mittels PHP

Habe gerade wenig Zeit für die Lösung... ich schau mal, ob ich das noch heute Abend schaffe, sonst erst morgen, sorry.

[Petra1979]

Danke Du bist ein Schatz ... wirklich keinen Stress bitte, Du hast nur so ein hohes Tempo vorgelegt, dass ich dachte, dass Du jetzt auf Urlaub bist .

Habe nur so "gedrängt", weil mir die Punkte b) c) d) wirklich wichtig wären. Einen Punkt e) gäbe es auch noch. Das wäre der wo, man noch zusätzlich ein Hintergrundbild lädt, auf dem "loading image" steht, aber ich bin schon wieder ruhig *g*.

1001x DANKE.

[Petra1979]

Mark - pls do not forget .

[webcreate]

So, dann mal wieder
Habe versucht soviel wie möglich umzusetzten.
Mit der mor_rewrite (URL-Umschreibung) musst mal schauen, mache da selber nicht viel....
Wichtig ist bei dem folgenden Script, das im selben Verzeichnis eine Grafik "blind.gif" (siehe Anhang) liegt. Sie dient der Positionsbestimmung.
Das Ganze geht im FireFox aber (wie fast immer) macht der IE noch Probleme, liegt am JavaScript zur Positionierung.
Das Ganze ist noch etwas buggy (siehe Kommentare), musst dich hat mal durchwühlen und schauen wie du es hinbekommst.

Die Kommentare sollten klarstellen, was man wo verwenden muss.

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; }
}

// Zur y-Positionsbestimmung im IE  !!! MACHT NOCH PROBLEME !!!
function getYPos(thisObject) {
    return((thisObject.offsetParent) ? (thisObject.offsetTop + getYPos(thisObject.offsetParent)) : thisObject.offsetTop);
}

function BildPos(imageName){
    var isIE4,isNav4,isNav6,imageName,yImg;
    if (navigator.appVersion.charAt(0) == "4")
        {
            if (navigator.appName.indexOf("Explorer") >= 0)    isIE4 = true;
            else isNav4 = true;
        }
        else if (navigator.appVersion.charAt(0) > "4") isNav6 = true;

        if (isNav6) {
            yImg = document.images[imageName].y;
        } else if (isNav4) {
            yImg = document.images[imageName].y;
        } else {
            yImg = getYPos(document.images[imageName]);
        }
        return yImg;
    }
//-->
</script>
</head>
<body>

<!-- DIV zur Ausgabe eines Thumbs -->
    <div style="width:530px;">
        <?
        // Bildangabe
        $image = "01.jpg";
        $anker = explode(".", $image);
        echo <<< ENDE
        <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</div>
        <div style="float:left;width:120px;height:120px;margin:2px;background-color:#cccccc;">
        <a href="$_SERVER[PHP_SELF]?image=images/$image#bild">
        <div style="width:120px;height:120px;display:block;margin:0 auto;background-image:url(thumbs/$image);background-repeat:no-repeat;background-position:center center;cursor:hand;"><img src="blind.gif" name="$anker[0]" border="0"></div>
        </a>
        </div>
<!-- // !!! WICHTIG: In der folgenden Zeile darf kein Leerzeichen voran stehen. ENDE muss am Zeilenanfang stehen !!! -->
ENDE;
?>
    </div>
<!-- ENDE DIV -->

<!-- DIV zur Ausgabe eines Textes -->
<div style="clear:left;">
Hier kommt dann der Content-Text rein.<br>
Halt ein einfacher Blindtext, Beschreibung, usw.
<div>
<!-- ENDE Textblock -->

<!-- DIV zur Ausgabe eines Thumbs -->
    <div style="width:530px;">
        <?
        // Bildangabe
        $image = "02.jpg";
        $anker = explode(".", $image);
        echo <<< ENDE
        <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</div>
        <div style="float:left;width:120px;height:120px;margin:2px;background-color:#cccccc;">
        <a href="$_SERVER[PHP_SELF]?image=images/$image#bild">
        <div style="width:120px;height:120px;display:block;margin:0 auto;background-image:url(thumbs/$image);background-repeat:no-repeat;background-position:center center;cursor:hand;"><img src="blind.gif" name="$anker[0]" border="0"></div>
        </a>
        </div>
<!-- // !!! WICHTIG: In der folgenden Zeile darf kein Leerzeichen voran stehen. ENDE muss am Zeilenanfang stehen !!! -->
ENDE;
?>
    </div>
<!-- ENDE DIV -->

<!-- DIV zur Ausgabe eines Textes -->
<div style="clear:left;">
Hier kommt dann der nächste Content-Text rein.<br>
Mal wieder ein beliebiger Text.
<p>bla bla bla</p>
<div>
<!-- ENDE Textblock -->

<!-- DIV zur Ausgabe eines Thumbs -->
    <div style="width:530px;">
        <?
        // Bildangabe
        $image = "03.jpg";
        $anker = explode(".", $image);
        echo <<< ENDE
        <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</div>
        <div style="float:left;width:120px;height:120px;margin:2px;background-color:#cccccc;">
        <a href="$_SERVER[PHP_SELF]?image=images/$image#bild">
        <div style="width:120px;height:120px;display:block;margin:0 auto;background-image:url(thumbs/$image);background-repeat:no-repeat;background-position:center center;cursor:hand;"><img src="blind.gif" name="$anker[0]" border="0"></div>
        </a>
        </div>
<!-- // !!! WICHTIG: In der folgenden Zeile darf kein Leerzeichen voran stehen. ENDE muss am Zeilenanfang stehen !!! -->
ENDE;
?>
    </div>
<!-- ENDE DIV -->

<!-- Ausgabe des Bildes -->
<?
if($_GET){
    $size = getimagesize($_GET['image']);
    $file_x = $size[0];
    $file_y = $size[1];
    $img = explode("/",$_GET['image']);
    $anker = explode(".",$img[1]);
    echo <<< END
    <script type="text/javascript" language="JavaScript">
    var sbreite=0,shoehe=0,b=0,h=0,x=0,y=0;
    
    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;
    }
    
    y =  BildPos('$anker[0]');
    // x-Position wenn eine y-Scollbar erscheint (20 ist nur ein Bsp. Ist Systemabhängig, da die Scrollbar je nach Skin unterschiedlich breit sein kann!)
    if ((y + $file_y) > shoehe) x = (sbreite-$file_x)-20;
    // x.Position wenn keine Scrollbar aktiviert ist. 
    // !!! INFO: Wenn die Page schon so lang ist, dass eine y-Scrollbar da ist, muss -1 wie oben erhöht werden (bsp. -20). IM IE macht es eh Probleme, da dort die Scrollbar schon sichtbar ist !!!
    else x = (sbreite-$file_x)-1;


    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;
}
?>
</body>
</html>

EDIT:
Sehe gerade, der Anhang der Grafik bringt nicht viel... ist ja transparent
Also einfach eine 1x1px große Grafik mit transparenten Hintergrund erstellen und als Transp.-GIF speichern.

[Petra1979]

Hui
Danke, hoffentlich kann ich in dem code den Überblick bewahren.
Noch weiß ich nicht, was Du alles realisiert hast, da hilft nur ausprobieren und aufgrund dessen kommt dann der Aha-Effekt *g*.

Wegen dem transparenten gif mach Dir keine Sorgen, das habe ich bis vor einigen Monaten noch in Zusammenhang mit Tabellen verwendet.

Bin froh wieder hier sein zu können! Habe mich mit der ZoneAlarm Security Suite selber ausgesperrt. Dürfte einer WIN-Systemdatei zu viele Rechte genommen haben und wurde somit nach der Anmeldung (Passworteingabe beim Hochfahren) sofort wieder abgemeldet ... Auch als Administrator half es nichts, mehr als das blau vom Desktop bekam ich nie zu sehen bevor ich wie von Geisterhand wieder abgemeldet wurde. Ich sag nur eines ... hoch lebe der abgesicherte Modus *g*.