Hi guys,
I need help with a JavaScript Image Gallery. It's actually not a big deal. I've got several thumbnails on my site. When the user clicks on one of the thumbnails, a new window is supposed to be opened, containing the full size version of the image.
Now comes the tricky part: Below the full size version, I want buttons (next image, previous image) to switch through all of the images on the site without having to close the window again and clicking manually on the next thumbnail!
Here's what I've done so far:
<script language="JavaScript">
Shot_Eff = new Image();
Screenshot = new Array;
Screenshot[1] = new Image();
Screenshot[1].src = "../Grafik/img01.jpg";
Screenshot[2] = new Image();
Screenshot[2].src = "../Grafik/img02.jpg";
Screenshot[3] = new Image();
Screenshot[3].src = "../Grafik/img03.jpg";
//and so on.
function Bilder(Art)
{
Shot_Eff.src = Screenshot[Art].src;
Info = window.open("about:blank", "Window2", "width=470,height=440,top=80,left=80,resizable=no");
Info.document.open();
Info.document.write("<HTML><HEAD><TITLE>Screenshots</TITLE></HEAD>",
"<BODY><CENTER><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/" + Shot_Eff.src + "'></CENTER>",
"<BR><BR><CENTER><form><input type=button value='http://www.webdeveloper.com/forum/archive/index.php/Close Window' onClick='window.close()'>",
"<input type=button value='http://www.webdeveloper.com/forum/archive/index.php/Next Image' onClick='NextImg()'></form></CENTER></BODY></HTML>");
Info.document.close();
}
function NextImg()
{
//???
}
</script>
The Thumbnail-Code between the <BODY>-Tags looks like this:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:Bilder(1)"><img src="../Grafik/img01.gif" border="0"></a>
<a href="javascript:Bilder(2)"><img src="../Grafik/img02.gif" border="0"></a>
...and so on....
Everything but the changing of the full size image via "Next Image" button works just fine. I have no clue how to do this, couldn't figure it out. Thanks for your help!
-Chris
I need help with a JavaScript Image Gallery. It's actually not a big deal. I've got several thumbnails on my site. When the user clicks on one of the thumbnails, a new window is supposed to be opened, containing the full size version of the image.
Now comes the tricky part: Below the full size version, I want buttons (next image, previous image) to switch through all of the images on the site without having to close the window again and clicking manually on the next thumbnail!
Here's what I've done so far:
<script language="JavaScript">
Shot_Eff = new Image();
Screenshot = new Array;
Screenshot[1] = new Image();
Screenshot[1].src = "../Grafik/img01.jpg";
Screenshot[2] = new Image();
Screenshot[2].src = "../Grafik/img02.jpg";
Screenshot[3] = new Image();
Screenshot[3].src = "../Grafik/img03.jpg";
//and so on.
function Bilder(Art)
{
Shot_Eff.src = Screenshot[Art].src;
Info = window.open("about:blank", "Window2", "width=470,height=440,top=80,left=80,resizable=no");
Info.document.open();
Info.document.write("<HTML><HEAD><TITLE>Screenshots</TITLE></HEAD>",
"<BODY><CENTER><IMG SRC='http://www.webdeveloper.com/forum/archive/index.php/" + Shot_Eff.src + "'></CENTER>",
"<BR><BR><CENTER><form><input type=button value='http://www.webdeveloper.com/forum/archive/index.php/Close Window' onClick='window.close()'>",
"<input type=button value='http://www.webdeveloper.com/forum/archive/index.php/Next Image' onClick='NextImg()'></form></CENTER></BODY></HTML>");
Info.document.close();
}
function NextImg()
{
//???
}
</script>
The Thumbnail-Code between the <BODY>-Tags looks like this:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:Bilder(1)"><img src="../Grafik/img01.gif" border="0"></a>
<a href="javascript:Bilder(2)"><img src="../Grafik/img02.gif" border="0"></a>
...and so on....
Everything but the changing of the full size image via "Next Image" button works just fine. I have no clue how to do this, couldn't figure it out. Thanks for your help!
-Chris