Bildergalerie mit Image-PopUp per "NewWindow.document.write"

ehnatnor · 21. Februar 2004

Hallo,
ich bin ein wenig überfordert mit dieser Thematik, daher dachte ich mein Problem hier zu posten um eine Lösung zu erhalten.
Zu meinem Problem:
Ich beabsichtige eine kleine Bildergalerie zu erstellen. Als Startseite soll eine Gesamtübersicht über alle verfügbaren Bilder erscheinen, welche als Thumbnails dargestellt werden. Diese Thumbnails sollen beim draufklicken als PopUp vergrößert erscheinen. Da ich jedoch keinen Nerv und auch nicht den Platz habe mehrere hundert HTML-Seiten für die einzelnen PopUps zu basteln, wird jedes PopUp-Fenster über ein im Netz gefundenes JavaScript geöffnet (siehe Code unten). Nun ist es aber so, dass ich, wie aus dem Code ersichtlich, nicht nur die Funktion zum schlißen des PopUp-Fensters in dem jeweils generierten Fensterchen haben will, sondern auch eine Funktion, mit der ich im PopUp-Fenster auch vorwärts und rückwärts innerhalb der vergrößerten Bilder navigieren kann - sprich ein Vorwärts-/Rückwärtsschalten um zum jeweils nächsten oder zurückliegenden Bild zu gelangen.

Hier der bereits bestehende Code der Galerieseite:

Code:

<html>

<head>
<title>Neue Seite 1</title>
<SCRIPT LANGUAGE="JavaScript">
	<!--- Hide script from old browsers
	function OpenNewWindow(cPicture,nWidth,nHeight,nBorder)
	{
	NewWindow=window.open("","NeuEins","HEIGHT="+nHeight+",WIDTH="+nWidth+",scrollbars=no,resizable=no,top=5,left=5");
	NewWindow.document.write ("<HTML><HEAD><TITLE>Image-PopUp");
	NewWindow.document.write ("</TITLE></HEAD>");
	NewWindow.document.write ("<BODY BGCOLOR='White'>");	
	NewWindow.document.write ("<P ALIGN=CENTER>");
	NewWindow.document.write ("<FONT FACE='Arial' SIZE='+2' COLOR='White'><B>");
	
	NewWindow.document.write ("</B></FONT>");
	NewWindow.document.write ("<IMG SRC=");
	NewWindow.document.write (cPicture);
	NewWindow.document.write (">");
	NewWindow.document.write ("</P>");
	NewWindow.document.write ("<center><FORM><INPUT TYPE='button' VALUE='Fenster zu' onClick='self.close()'>");
	NewWindow.document.write ("</FORM></CENTER></BODY></HTML>");
	NewWindow.document.write ("</BODY></HTML>");
	NewWindow.document.close();
	return false;
	}
	
	// end hiding from old browsers -->
	</SCRIPT>
<style type="text/css">
<!--
BODY { 
	scrollbar-base-color: #FFFFFF;
	scrollbar-track-color: #FFFFFF;
	scrollbar-face-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #8FBBD5;
	scrollbar-darkshadow-color:;
	scrollbar-shadow-color: #549AC0;
	scrollbar-arrow-color: #226286;
}
-->
</style>
</head>

<body TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<table border="0" width="575" id="table1" cellspacing="1">
	<tr>
		<td width="575" align="center">
		&nbsp;</td>
	</tr>
	<tr>
		<td width="575" align="center">
		<a href=# onClick="OpenNewWindow('images/Ristedt_03_003.jpg',500,400);return false;">
		<img border="2" src="images/Ristedt_03_003_small.jpg" xthumbnail-orig-image="images/Ristedt_03_003.jpg"></a>&nbsp;
		<a href=# onClick="OpenNewWindow('images/Ristedt_03_002.jpg',500,400);return false;">
		<img border="2" src="images/Ristedt_03_002_small.jpg" xthumbnail-orig-image="images/Ristedt_03_002.jpg"></a>&nbsp;
		<a href=# onClick="OpenNewWindow('images/Ristedt_03_001.jpg',500,400);return false;">
		<img border="2" src="images/Ristedt_03_001_small.jpg" xthumbnail-orig-image="images/Ristedt_03_001.jpg"></a></td>
	</tr>
	<tr>
		<td width="575" align="center">
		&nbsp;</td>
	</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</body>

</html>

Ich würde mich sehr freuen, wenn dieses Problem lösbar ist und jemand sich dessen annimmt.
Hier habe ich noch den bestehenden Code ins Netz gestellt: Testseite

Danke im Voraus,

ehnatnor

Bildergalerie mit Image-PopUp per "NewWindow.document.write"

ehnatnor

Mitglied

Neue Beiträge