Popup-Fenster öffnen...

Dieses Thema Popup-Fenster öffnen... im Forum "Webentwicklung, Hosting & Programmierung" wurde erstellt von noah1, 8. Apr. 2005.

Thema: Popup-Fenster öffnen... Mittlerweile glaube ich PHP einigermaßen zu verstehen, zumindest gelingt mir da immer mehr, teilweise auch mit Eurer...

  1. Mittlerweile glaube ich PHP einigermaßen zu verstehen, zumindest gelingt mir da immer mehr, teilweise auch mit Eurer Hilfe...
    Aber bei Java-Script blick ich nun überhaupt nicht durch, deshalb meine Frage:

    Ich habe eine Bildergalerie programmiert, in der die Bilder eines ausgewählten Ordners angezeigt werden.
    Diese kann (konnte) man durch ein Javascript per Mausclick vergrößern, der Code dazu ist folgender:
    Code:
    
    <div id='zoom' style=position: absolute; top:50; margin-left:0px; background:#e0e0e0; padding:5px; border:1px solid black; display:block; z-index:-1; text-align:right;></div>
    <script type=text/javascript>
    var dz = document.getElementById('zoom');
    function zoom_hide()
    {
     dz.style.zIndex = -1;
     dz.innerHTML =->';
    }
    function zoom_show(obj)
    {
     var o = obj;
     var y = -(obj.height*10/3 + 25);
     while (o) { y += o.offsetTop; o = o.offsetParent; }
     dz.innerHTML = (obj.alt ?-><b>'+obj.alt+'</b><br>' :->')+'<img src='+obj.src.replace(/-tn/,-n)+' onclick=zoom_hide();><br><span style=font-size:8pt;>Schließen? Bild anklicken!</span>';
     dz.style.top = y > 80 ? y : 80;
     dz.style.zIndex=2;
    // dz.style.top = y > 430 ? y-350 : 80;
    }
    </script>
    
    ...
    <?php
    
    echo<img src='$thumbs1/$file' alt='$file' title='$file' width='170px' height='112px'onclick='zoom_show(this);'></a> ; 
    
    ?>
    
    Dann kam mir die Idee, da die Bilder in der Galerie ja doch immer mehr werden und die Ladezeiten dadurch nicht besser, ein Script zu schreiben, daß die Bilder beim Upload (per PHP-Script) als Thumb's in ein weiteres Verzeichnis kopiert, d.h. wenn ich eine Galerie Test anlegen will wird ein Ordner Test im Pfad galerie/galerieordner für die Bilder in Originalgröße erstellt, und ein weiterer Ordner Test im Pfad galerie/thumbordner, in den dann die Thumbnails kommen.

    Für die Ausgabe der Bilder einer Galerie ist das Script unten in diesem Post zuständig (Fertig kann man das hier ansehen).

    In diesem Script wird der Ordner, in dem die Bilder in groß gespeichert sind ausgelesen,
    und für jedes Bild, daß in dem Ordner ist wird das Bild mit demselben Namen aus dem Thumbnailordner angezeigt, zuerst alle im Quer-, dann im Hochformat.
    Wenn ich jetzt ein Bild anklicke wird das Popup (falls man das bei dem Code in diesem Fall so nennen kann) in der Größe des Thumbnails angezeigt.
    Wie muß ich das Java-Script also schreiben daß ich das ursprüngliche Bild angezeigt bekomme ?

    Code:
    <div id='zoom' style=position: absolute; top:50; margin-left:0px; background:#e0e0e0; padding:5px; border:1px solid black; display:block; z-index:-1; text-align:right;></div>
    <script type=text/javascript>
    // Copyright (c) 2005 by Tegtmeier Internet Solutions e.K.
    // Author: Jan Tegtmeier
    var dz = document.getElementById('zoom');
    function zoom_hide()
    {
     dz.style.zIndex = -1;
     dz.innerHTML =->';
    }
    function zoom_show(obj)
    {
     var o = obj;
     var y = -(obj.height*10/3 + 25);
     while (o) { y += o.offsetTop; o = o.offsetParent; }
     dz.innerHTML = (obj.alt ?-><b>'+obj.alt+'</b><br>' :->')+'<img src='+obj.src.replace(/-tn/,-n)+' onclick=zoom_hide();><br><span style=font-size:8pt;>Schließen? Bild anklicken!</span>';
     dz.style.top = y > 80 ? y : 80;
     dz.style.zIndex=2;
    // dz.style.top = y > 430 ? y-350 : 80;
    }
    </script>
    		
    <?php
    $pfad = galerie/galerieordner;
    $thumbs = galerie/thumbordner;
    echo<div style='width: 620px; text-align: center; vertical-align: top; font: 12px verdana; font-weight: bold; letter-spacing: 1px;'><p>Galerieauswahl</p>
    		<center>
    		<table style='width: 400px; text-align: center;' border='1'>
    		<tr>
    			<td style='font:9px verdana;' colspan='4'><b>Bildergalerie auswählen</b>
    			</td>
    			</tr><tr>;
    			$handle = opendir($pfad);
       			$reihen = 0;
    				$dateizaehler = 0;			
    				while ($file = readdir($handle)){
    						if(($file != .) && ($file != ..)){
              			$dateizaehler++;
    								echo<td style='width: 100px; font: 9px verdana; text-decoration: none;'><a href='index.php?go=galerie&galerie=$file'>$file</a></td>;
    					 		if($dateizaehler == ($reihen + 4)){
    								echo</tr><tr>;
    								$reihen = $dateizaehler;
    						}
    						}
    						}
          	   closedir($handle);
    		echo</tr>
    		</table>
    			
    			</div>
    			<div style='text-decoration: none;'><p>;
    			if (isset($galerie)){
    			$pfad1 = $pfad/$galerie;
    			$thumbs1 = $thumbs/$galerie;	
    		
    			$bildordner = opendir($pfad1);
    				$reihen1 = 0;
    				$dateizaehler1 = 0;			
    				while ($file = readdir($bildordner)){
    							if(($file != .) && ($file != ..)){
              			$bild = $pfad1/$file;
    								$bildgroesse = (getimagesize($bild));
    								if($bildgroesse[0] > $bildgroesse[1]){
    								$dateizaehler1++;
    								echo<img src='$thumbs1/$file' alt='$file' title='$file' width='170px' height='112px'onclick='zoom_show(this);'></a> ; 
    								if($dateizaehler1 == ($reihen1 + 3))
    									{
    									echo<br>;
    									$reihen1 = $dateizaehler1;
    									}
    								}	
    								}				
    						
    							}
    						closedir($bildordner);
    						$bildordner = opendir($pfad1);
    				$reihen1 = 0;
    				$dateizaehler1 = 0;			
    				while ($file = readdir($bildordner)){
    							if(($file != .) && ($file != ..)){
              			$bild = $pfad1/$file;
    								$bildgroesse = (getimagesize($bild));
    								if($bildgroesse[0] < $bildgroesse[1]){
    								$dateizaehler1++;
    								echo<img src='$thumbs1/$file' alt='$file' title='$file' width='112px' height='170px' onclick='zoom_show(this);'> ; 
    								if($dateizaehler1 == ($reihen1 + 4))
    									{
    									echo<br>;
    									$reihen1 = $dateizaehler1;
    									}
    									}	
    									}				
    									}
    									}
    			
    			
    			echo</p></div></center>;
    			?>
    
    Ich hoffe Ihr konntet mir folgen...
     
  2. Versuch's mal so ;)



    allerdings ohne Garantie ;)


    gruss conny
     
  3. Dann wird beim Click auf ein Thumbnail dieses durch das größere ersetzt, das sieht man dadurch dass dann die Bildqualität des angeclickten Thumbs stark verbessert wird.
    Ich habe jetzt per Java-Script ein echtes Popup eingefügt. in dem auch die große Version des Bildes angezeigt wird.

    Der Code:
    Code:
    <script type=text/javascript>
    // <![CDATA[
    function PopUp(w,h,ziel) {
     h = h - 20; var x=0, y=0, parameter=;
     if (w < screen.availWidth || h < screen.availHeight) {
      x = (screen.availWidth - w - 12) / 2;
      y = (screen.availHeight - h - 104) / 2;
      if (window.opera) y = 0; // Opera positioniert unter den Symbolleisten
      if (x<0 || y<0) { x=0; y=0; }
      else parameter = width= + w + ,height= + h + ,;
     }
     parameter += left= + x + ,top= + y;
     parameter += ,menubar=yes,location=yes,toolbar=no,status=no;
     parameter += ,resizable=yes,scrollbars=yes;
     var Fenster = window.open(ziel,PopUp,parameter);
     if (Fenster) Fenster.focus();
     return !Fenster;
    }
    // ]]>
    </script>
    ...
    <?php
       echo<a href=\$pfad1/$file\ onclick=\return PopUp(800,531,this.href)\><img src=\$thumbs1/$file\ alt=\$file\ title=\$file\ width='170px' height='112px'></a>  ;
    ?>
    
    
    
    Wie gesagt - Java-Script ist nicht so mein Ding...
    Was muß ich einfügen/verändern damit sich
    1. Nicht unendlich viele Popups öffnen, wenn man die Thumbs anclickt, sondern das angeklickte Thumb in einem evtl. sowieso schon offenen Popup angezeigt wird ?
    2. Sich das Popup beim Klicken in das Bild wieder schließt ?
     
  4. OK, ich hatte vergessen zu erwähnen, dass der z-index deines Layers auf einen positiven Wert gestellt werden muss.
    Da dein Wert Negativ war, konntest du auch nichts sehen.
    Das mit den Thumbnails hab ich gefixt indem ich jetzt gleich den richtigen Pfad zum Bild übergeben habe.

    Hier jetzt nochmal das Script im ganzen. (und das funktioniert definitiv ;))

    Code:
    <script language=javascript type=text/javascript>
    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; }
    }
    //-->
    
    function zoom_hide()
    {
     MM_showHideLayers('zoom','','hide')
    }
    
    function zoom_show(obj,file)
    {
     var lay = MM_findObj('zoom');
     var o = obj;
     lay.innerHTML = (obj.alt ?-><b>'+obj.alt+'</b><br>' :->')+'<img src='+file+' onclick=zoom_hide();><br><span style=font-size:8pt;>Schließen? Bild anklicken!</span>';
     MM_showHideLayers('zoom','','show');
    }
    </script>
    
    <div id='zoom' style=visibility:hidden; position: absolute; top:50; margin-left:0px; background:#e0e0e0; padding:5px; border:1px solid black; display:block; z-index:10; text-align:right;></div>
    
    <?php
    echo <hr>;
    $pfad = galerie/galerieordner;
    $thumbs = galerie/thumbordner;
    // wird benötigt, wenn REGISTER_GLOBALS auf OFF steht (standard)
    $go = $_REQUEST['go'];
    $galerie = $_REQUEST['galerie'];
    
    echo<div style='width: 620px; text-align: center; vertical-align: top; font: 12px verdana; font-weight: bold; letter-spacing: 1px;'><p>Galerieauswahl</p>
    		<center>
    		<table style='width: 400px; text-align: center;' border='1'>
    		<tr>
    			<td style='font:9px verdana;' colspan='4'><b>Bildergalerie auswählen</b>
    			</td>
    			</tr><tr>;
    			$handle = opendir($pfad);
       			$reihen = 0;
    				$dateizaehler = 0;			
    				while ($file = readdir($handle)){
    						if(($file != .) && ($file != ..)){
              			$dateizaehler++;
    								echo<td style='width: 100px; font: 9px verdana; text-decoration: none;'><a href='index.php?go=galerie&galerie=$file'>$file</a></td>;
    					 		if($dateizaehler == ($reihen + 4)){
    								echo</tr><tr>;
    								$reihen = $dateizaehler;
    						}
    						}
    						}
          	   closedir($handle);
    		echo</tr>
    		</table>
    			
    			</div>
    			<div style='text-decoration: none;'><p>;
    			if (isset($galerie)){
    			$pfad1 = $pfad/$galerie;
    			$thumbs1 = $thumbs/$galerie;	
    		
    			$bildordner = opendir($pfad1);
    				$reihen1 = 0;
    				$dateizaehler1 = 0;			
    				while ($file = readdir($bildordner)){
    							if(($file != .) && ($file != ..)){
              			$bild = $pfad1/$file;
    								$bildgroesse = (getimagesize($bild));
    								if($bildgroesse[0] > $bildgroesse[1]){
    								$dateizaehler1++;
    								echo<img src='$thumbs1/$file' alt='$file' title='$file' width='170px' height='112px'onclick='zoom_show(this,\$bild\);'> ; 
    								if($dateizaehler1 == ($reihen1 + 3))
    									{
    									echo<br>;
    									$reihen1 = $dateizaehler1;
    									}
    								}	
    								}				
    						
    							}
    						closedir($bildordner);
    						$bildordner = opendir($pfad1);
    				$reihen1 = 0;
    				$dateizaehler1 = 0;			
    				while ($file = readdir($bildordner)){
    							if(($file != .) && ($file != ..)){
              			$bild = $pfad1/$file;
    								$bildgroesse = (getimagesize($bild));
    								if($bildgroesse[0] < $bildgroesse[1]){
    								$dateizaehler1++;
    								echo<img src='$thumbs1/$file' alt='$file' title='$file' width='112px' height='170px' onclick='zoom_show(this,\$bild\);'> ; 
    								if($dateizaehler1 == ($reihen1 + 4))
    									{
    									echo<br>;
    									$reihen1 = $dateizaehler1;
    									}
    									}	
    									}				
    									}
    									}
    			
    			
    			echo</p></div></center>;
    			?>
    
    gruss conny
     
  5. Jetzt geht es.
    Das Ergebnis kann man hier sehen...
     
Die Seite wird geladen...

Popup-Fenster öffnen... - Ähnliche Themen

Forum Datum
Popup-Fenster Windows XP Forum 6. Sep. 2007
Popup-Fenster ? Webentwicklung, Hosting & Programmierung 10. Juni 2005
Popup-Fenster schließen Windows XP Forum 27. Apr. 2005
Links und Popup-Fenster zeigen nichts an Web-Browser 27. Jan. 2005
Popup-Fenster beim verlassen einer Website? Webentwicklung, Hosting & Programmierung 21. Okt. 2002