✔ Bildergalerie mit Popup

matthiasschnueriger

matthiasschnueriger

Erfahrenes Mitglied
Hallo

Ich verwende eine Bildergalerie die folgendermassen funktioniert: Oben werden Thumnails aufgelistet (100x67px), unter den Thumnails wird ein mittelgrosses Bild angezeigt (300x200px). Über einen Javascript-Link (getElementById) kann das mittelgrosse Bild verändert werden.
Was ich jetzt noch möchte ist, das mit Klick auf das mittelgrosse Bild, das grosse Bild (600x400px) in einem Popup geöffnet wird. Doch was muss ich statt $imagePath nehmen?
Geht mein Vorhaben überhaupt, da ja die Seite gar nicht bei jedem Klick geladen wird?

PHP: 
<script language="javascript">
		function setPic(picture,bigpicture,description){
			document.getElementById("picture").src=picture;
			document.getElementById("picture_description").innerHTML=description;
		}
</script>

<script language="javascript">
<!--
ScreenWidth = screen.width;
ScreenHeight = screen.height; 
function galeriepopup(){
	window.open("<? echo $imagePath ?>",null,"width=600,height=400,left="+((ScreenWidth/2)-100)+",top="+((ScreenHeight/2)-300));
}
//-->
</script>

echo " <a href=\"javascript:galeriepopup();\"><img id=\"picture\" src=\"$imagePath\" width=\"300\" height=\"200\" border=\"0\"></a>" .
 
Ob dein Vorhaben geht kommt darauf an, nach welchem Muster die Bilder benannt sind und ob sie alle im gleichen Pfad stehen.

Rein vom Prinzip her könntest du in der Funktion galeriepopup() das src des mittelgroßen Bildes aus auslesen und aus dem dann die URL zum großen Bild machen. Das geht aber nur, wenn die Bilder irgentwie zusammenhängend nummeriert sind.

Beispiel:

Nehmen wir mal an die Bilder lägen alle im gleichen Verzeichnis "bilder/" und ihr Dateiname wäre aus dem String "bild", der Nummer z.B. "01" einem der Bustaben "k", "m" oder "g" (für klein mittel oder groß) und der Dateiendung "jpg" zusammengesetzt. Also z.B. "bild05m.jpg" für das fünte Bild, das mittelgroß ist. Hätte jetzt der User auf das Tumb vom fünften Bild, also auf "bild05k.jpg" geklickt, wäre der src von dem mittleren Bild jetzt "bilder/bild05m.jpg". Die Funktion, die das PopUp öffnet muss also nur noch das "m" durch ein "g" ersetzten und kann den Rest dann hernehmen:
HTML: 
<script type="text/javascript">
   ScreenWidth = screen.width; 
  ScreenHeight = screen.height;  
  function galeriepopup(strSrc){ 
 	window.open(strSrc.replace(/m.jpg/,"g.jpg"),null,"width=600,height=400,left="+((ScreenWidth/2)-100)+",top="+((ScreenHeight/2)-300)); 
  }
   </script>
 <a href="javascript:galeriepopup(document.getElementById('picture').src);"><img id="picture" src="bilder\bild05m.jpg" width="300" height="200" border="0"></a>
Besser wäre allerdings den Aufruf per onclick zu machen und sich über firstCild schreibarbeit zu ersparen: <a href=#" onclick="this.firstChild.src;return false;"><img id="picture" src="bilder\bild05m.jpg" width="300" height="200" border="0"></a>

Hoffe das hat dir halwegs weiter geholfen oder dir zumindest ne Idee gegeben, wie du dein Problem lösen könntest
 
Zuletzt bearbeitet:
Vielen Dank für deine ausführliche Antwort. Es war eigentlich einfacher, den ich habe jeweils nur ein Bild, woraus ein Thumb generiert wird.

Es klappt jetzt soweit, dass die Bilder in gross angezeigt werden. Doch was jetzt noch hübsch wäre ist, dass das Popup die Grösse des Bildes hat, das drin ist. Den es sind ja nicht alle grossen Bilder gleich gross. Ich habe schon mal was von getimagesize() gehört, somit könnte ich doch die Breite und Höhe des Bildes raussuchen und dann das Popup entsprechend gross machen... Würde das funktionieren? Und wie? :)

PHP: 
<script type="text/javascript">
   ScreenWidth = screen.width; 
  ScreenHeight = screen.height;  
  function galeriepopup(strSrc){ 
 	window.open(strSrc.replace(),null,"width=720,height=480,left="+((ScreenWidth/2)-360)+",top="+((ScreenHeight/2)-240)); 
  }
   </script>

 

  <? 
    echo "<table width='100%' 'cellpadding='0' cellspacing='0'>" .
    		"<tr>" .
    		"<td style='border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;padding:10px;'>" .
    		"  <a href=\"javascript:galeriepopup(document.getElementById('picture').src);\"><img id=\"picture\" src=\"$imagePath\" width=\"300\" height=\"200\" border=\"0\"></a>" .
    		"</td>" .
    		"<td valign='top' width='100%' style='border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;padding:10px;'>" .
    		"  <span id=\"picture_description\">$imageDescription</span>" .
    		"</td>" .
    		"</tr>" .
    		"</table>";
?>
 
Schau dir das ensprechende Script auf meiner Seite zu Turorials.de mal an. Ich weiß, es ist nicht ganz leicht zu verstehen, aber es macht genau was du willst und wenn du dich ein bisschen anstrengst, wirst du es anpassen können.
 
Zuletzt bearbeitet:
Danke für dein Skript. Was ich nicht verstehe ist, dass es manchmal funktioniert und manchmal nicht... dein Skript Wenn du ein paar mal aktualisierst, siehst du was ich meine.

Dann habe ich auch noch ein wenig ein Durcheinander wegen dem href und dem on click.
Im Moment kommt zwar das richtige Bild, aber nicht in einem Popup, welches dann auch gleich die Grösse des Bildes hat.. :-(

Hier nach wie vor das Skript für die mittleren Bilder:

Code: 
<script language="javascript">
		function setPic(picture,bigpicture,description){
			document.getElementById("picture").src=picture;
			document.getElementById("picture_description").innerHTML=description;
		}
</script>

Dann dein Skript:

Code: 
<script type="text/javascript"><!--
	//coded by con-f-use@gmx.net - be fair and do not remove this

	var picCnt=0, pic=new Array();

	function popImage(strURL) {
		pic[picCnt] = new Image();
		pic[picCnt].src = strURL;
		setTimeout('sizePopup('+ (picCnt++) +')', 20);
		return false;
	}

	function sizePopup(intPic) {
		if (!!pic[intPic].width) {
			var win = window.open('','','height='+pic[intPic].height+', width='+pic[intPic].width);
			with (win.document) {
				open();
				write(
					'<html><head><title>POPUP</title></head>'+
					'<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><div>'+
					'<img src="'+ pic[intPic].src +'" width="'+ pic[intPic].width +'" height="'+ pic[intPic].height +'" />'+
					'</div></body></html>'
				);
				close();
			}
		} else
			setTimeout('sizePopup('+ intPic +')',20);
	}

//--></script>

Und hier die Ausgabe des mittleren Bildes inkl. Beschreibungstext:

PHP: 
<? 
    echo "<table width='100%' 'cellpadding='0' cellspacing='0'>" .
    		"<tr>" .
    		"<td style='border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;padding:10px;'>" .
    		"  <a href=\"javascript:window.open(document.getElementById('picture').src);void(0);\" onclick=\"return popImage(this.href)\"><img id=\"picture\" src=\"$imagePath\" width=\"300\" height=\"200\" border=\"0\"></a>" .
    		"</td>" .
    		"<td valign='top' width='100%' style='border-top:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;padding:10px;'>" .
    		"  <span id=\"picture_description\">$imageDescription</span>" .
    		"</td>" .
    		"</tr>" .
    		"</table>";
?>

Wie gesagt, hier checke ich das mit dem href und dem onClick nicht.....

Die aktuelle Galerie findet Ihr hier: Galerie
 
Das es manchmal funktioniert und manchmal nicht liegt daran, dass manchmal das Bild schon im Borwsercache ist und manchmal nicht. Das Bild braucht ein wenig, bis es geladen ist, das Script funktioniert (zumindest bei mir) immer - es braucht halt nur manchmal länger bis das PopUp aufgeht, wenn das Bild geladen ist. Außerdem spielen mir ab und an die beschissen Werbung-Scripte von meinem Web-Hoster einen streich und beeinflussen das Script.

Das lässt sich umgehen, indem man die Bilder vorläd.

Das mit dem href und dem onclick brauchst du nicht checken: Die Funktion erwartet einfach die URL zu dem Bild als Parameter. Du kannst auch <a href="javascript:popImage('http://www.beispie.de/bla/blubb.jpg')"> oder <a href="#" onclick="return popImage('http://www.beispie.de/bla/blubb.jpg')" schreiben.
 
Zuletzt bearbeitet:
Doch den bekomme ich auch, aber das ist wie gesagt ein bescheuertes Werbescript von meinem Webhoster, das da ab und zu reinspielt. Ich bekomme den Fehler nie, wenn das Script bei mir auf der lokalen Festplatte liegt.
 
Ok hätten wir wenigstens das geklärt ;-).

Dann zu deinen Vorschlägen (wegen dem href)... die funktionierten nicht.

Ich habe jetzt wieder mein Code:

Code: 
<a href=\"javascript:window.open(document.getElementById('picture').src);void(0);\" onclick=\"return popImage(this.href)\"><img id=\"picture\" src=\"$imagePath\" width=\"300\" height=\"200\" border=\"0\"></a>

Dieser funktioniert (wenigstens zur Hälfte). Aber das *#%*ç-Popup geht nicht auf....
 
Du musst dir schon durchlesen, was ich schreibe und ein wenig nachdenken. Wenn du's mit this.href machst muss im href auch wirklich nur die URL zum bild stehen (und nix von wegen javascript:window.open...). Die URL erwartet naemilich meine Funktion popImage() als Parameter.

So wie du's geschrieben hast - sei mir nicht boese - Zeugt das nicht gerade von einem Mindestmas an mitdenken ;-]. Du oeffnest naemlich das popUp zwei mal. Ein Mal ueber das javascript:window.open und einmal ueber den onclick. Bei letzterem gibt's aber einen Fehler, weil im this.href, wie schon ausgefuert, Mist steht. ;)

Versuch's mal so:
Code: 
<a href="#" onclick="return popImage(document.getElementById('picture').src)">
 	<img id="picture" src="http://www.beispiel.de/bla/blubb.jpg" width="300" height="200" border="0">
  </a>
Und bitte, auch wenn es bisher bei dir noch gut lesbar war kein php im Js-Forum. Erstens kannst du nicht voraussetzten, dass jeder JS-ler auch php kann und zweitens will nicht jeder JS-ler immer erst den php-Code gedanklich aufdroeseln muessen, bevor er an das JS rankommt, das das eigentlich Problem ist.
Ganz vom Prinzip her einmal abgesehen :rolleyes:. Danke!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück