PDA

Click to See Complete Forum and Search --> : Image Gallery

Chris_TC
03-17-2003, 06:00 AM
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='" + Shot_Eff.src + "'></CENTER>",
"<BR><BR><CENTER><form><input type=button value='Close Window' onClick='window.close()'>",
"<input type=button value='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="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
gil davis
03-17-2003, 06:56 AM
var currImg = 0;

function Bilder(Art) {
currImg = Art;
...
}

function NextImg() {
currImg = (currImg + 1) % Screenshot.length;
Info.document.images[0].src = Screenshot[currImg].src;
}
Chris_TC
03-17-2003, 08:40 AM
@gil davis:

I'm afraid, this doesn't work. The occuring error is "object expected". This is an error I keep on getting whenever I try to change the .src?! Any idea what this might mean?
gil davis
03-17-2003, 08:46 AM
The occuring error is "object expected".It means something does not exist. Either you have misspelled something or miscapitalized something, or you put the script in the wrong page.

It would be helpful if you could post a link. Failing that, zip up the page and images and attach it to your reply.
Chris_TC
03-17-2003, 09:09 AM
Okay, here we go.

I trimmed the code down to the important bits and zipped it up together with two thumbs and two full size images. Hope you can figure it out.
gil davis
03-17-2003, 09:26 AM
I changed the numbering of the images to be 0 significant so the modulus arithmetic would work. Then I changed the "next" button to point to the script in the opener. Last, I fixed your broken script masking comment (common mistake on an unneccesary technique). See attached file.
Chris_TC
03-17-2003, 09:39 AM
It works! Thank you so much, I had almost gone crazy. The masking comment went wrong when I trimmed down the code.
However, I have never heard of the "opener", I'll check that in the JavaScript Reference, seems to be important :)

Again, thanks a lot!