If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

How to get images to change by themselves (JavaScript Problem)

Hello everyone. Ok, here's the problem. Basically what I would like to happen is, is to have pictures set up, and when you click on a link a new window pops up (this part I already have done, it's the next part I need help with). Then the pictures that I have for my website, will start to scroll though themselves at timed intervals (say 2 - 3 seconds) and will continue to do so until the window is closed, so basically forever. Like I said before though, the pictures should change by themselves without user interaction and without the aid of buttons to change the pictures and such. I have been trying to get this right for some time now, and to no avial, nothing is working. I would extremely appreciate anyone's help, or for even someone to give me (or direct me to) the proper coding I should be using. Any help is appreciated. Thank you for your time.

- Cory

P.S. If you do not understand something I've put, or need more information on the problem to help me, feel free to post a reply, or if you would like a quicker response from me, you can reach me at cdallin_77@hotmail.com Thanks once again.

Ok, well here is the coding that I am using. For some reason though, the pictures will not rotate past the 9th picture, for the 10th, 11th, and 12th, nothing happens. thats really the only problem that I need fixed. Thanks. If you need any more info, let me know

ok, the coding is not working for some reason. none of it. none of the pictures show up now. in the coding that I supplied, pictures 1 through 9 will show up and scroll through themselves like they should. all i need is someone to help make the coding work so that picture #'s 10,11, and 12, will show up and scroll through with the rest of the sequence. all thats happening is when it gets to #'s 10, 11 and 12, it just stays blank, and when their "turn" for "showing up" is over, it goes back to the beginning of the loop and starts again. which is what its supposed to do, its just, like i said, 10,11,and 12, wont show up.

ok let me extract the code from my JS file for the site and i'll post it.
Note, it looks like i've lost the hard copy of it, so this copy will be formatted ugly (i.e i removed whitespace to save room).

The image array is where all the images you will be scrolling through will be stored. The image names must not include their directory, that is defined below. Example, if the image is stored in "images/image1.gif" in the array you would enter "image1.gif".
Also note, the array must end with the value 'EOF' (end of file). i know this probably isn't the best way to do this, but the image scroller was eventually spossed to have controls to it, so i set it up this way... so for simplicity sake, just make sure the last array value is 'EOF'

Code:

var current = 0; // start image

This is the image position you wish to start on, generally this should be left as '0' (remember, the array keys start at 0 not 1).

Code:

var imgPath = "path/to/Image/";

This is the path to the images directory. Do not include the entire url if you do not need too. If the images are stored in a folder from the root a simple "folderName/" will work. Note, there must be a trailing slash on this! i.e "folderName" is incorrect, "folderName/" will work.

Code:

var previous = "null";
var to;
var isLoading = 0;
var looping = 1;

The rest of this code should not be changed. From what you have written it should be fine as is.

The last two things you will need (one if you did not include the image preloader), is the init call from the body onload and the physical html for the gallery.
First we will do the call to the function.

in the body tag add the following attributes.

Code:

onLoad="setTimeout(function(){run_gal('5','99')},1000)"

you will notice two values are being passed to the function in this call. if you look at the function you will see this is the interval (for the image scrolling) in seconds, and the number of passes you want it to do. Right now the image will change ever 5 seconds and it will pass through 99 times (repeating images where applicable). This is nice if you want to only show a selective number of images for say, a instructions slideshow? if you want this to appear endless just set the second number to 99 (like what i have done).

Now, if you wanted to preload these images (to allow them to load faster), you will need to change the attribute above slightly, and append the following :