Announcement

**glenngv** · Jun 17, 2002, 10:36 PM

Re: Gallery Mess

it's better to have the images in an array then traverse through it. If you are using a server-side language, you can write out the array dynamically.

Originally posted by Aiden
This is posted at WA as well, I felt a little lonely over there however.

I think I'm close with this, a little push might help. I'm building an image gallery, my images are all located in one folder and their names are cronological from "001.gif" to "00whatever.gif" (all gifs).

The image change is not on timer, it is controlled with a button (i.e. "Show Next Image"). What I'm making is a clever little script that will keep going +1 with image file name (i.e. was 001.gif now 002.gif) 'till it see's there are no files left at which time it will take the visitor to a goodbye page!

This is where I'm up to...

function nextimage() {
//Something here that sees current image
//name and does plus one to the name!
//This then makes the new image a
//variable called "URL"
var tester=new Image(); //Preload
tester.onLoad=isGood; //is it there?
tester.onError=isBad; //no?
tester.src=URL;
}

function isGood() {
//something here to +1 the image name and replace it;
}

function isBad() {
//location.href="goodbye.html";
}

<BODY>

<IMG SRC="001.gif" NAME="picture">

<input type="button" onclick="nextimage();">

Make sense? It sees the current image... adds +1 to the name... sees that this new image is there... if it is... it replaces the current image with the new "+1" image name... if it's not there... it takes the visitor to another page!

Any assistance will be greatly appreciated... Aiden

**Aiden** · Jun 17, 2002, 10:51 PM

Fair enough,

I would still appreciate hearing any other thoughts on how to make this work, however, lets say I did use an array and cut the dynamic file check out, can you demonstrate a nice script to do the following....

An array of preloaded images, when the user clicks on the "next button" the script sees what the current image is and replaces with the next-in-line.

But, here's the tricky part: I also want to use a back button to go back (well it's obvious isn't it) and the image being replaced is the background image of a table!

So, when you hit next or back, the background image in a table is replaced with the next or previous image in an pre-loaded array. Of course, I've done a little work getting this far, but I couldn't get it cross-browser (i.e. ie/ns6 at least).

By the way, the images are all the same size....

**JohnKrutsch** · Jun 18, 2002, 12:00 AM

Here is a basic slide show with similar functionality:

<script type="text/javascript">

</script>

<img src="images/pic1.gif" border="0" name="pic">
<br />
<a href="#" onclick="slide('back'); return false" onfocus="this.blur()"><img src="images/back.gif" name="back" border="0"></a>
<a href="#" onclick="slide('next'); return false" onfocus="this.blur()"><img src="images/next.gif" name="next" border="0"></a>

If you did not want to have to manually input how many pictures there were then you would have to use a server-side language to determine how many images there were in the folder.

Announcement

Gallery Mess

Gallery Mess

Comment

Comment

Comment