Popup-Fenster öffnen...

  • #1
N

noah1

Bekanntes Mitglied
Themenersteller
Dabei seit
16.08.2002
Beiträge
1.415
Reaktionspunkte
0
Ort
Hamburg
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 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 ;)

<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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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)
{
var lay = MM_findObj('zoom');
var o = obj;
o.src = o.src.replace(thumbordner,galerieordner);
o.src = o.src.replace(/-tn/,-n);
lay.innerHTML = (obj.alt ?-><b>'+obj.alt+'</b><br>' :->')+'<img src='+o.src+' onclick=zoom_hide();><br><span style=font-size:8pt;>Schließen? Bild anklicken!</span>';
MM_showHideLayers('zoom','','show');
}
</script>
Zum Vergrößern anklicken....


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 sehen...
 
Thema:

Popup-Fenster öffnen...

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums

Themen
113.840
Beiträge
707.965
Mitglieder
51.494
Neuestes Mitglied
Flensburg45
Oben