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

electric_4_ever · 10-15-2005, 03:51 PM

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.

rlemon · 10-15-2005, 06:44 PM

post what you have now and i'll help.

electric_4_ever · 10-15-2005, 08:21 PM

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>
<HEAD>
<CENTER>

<script language="javascript">

</script>

<TITLE>Pantera In Concert With Slayer</TITLE>
<script language="JavaScript">

</script>
</HEAD>

<BODY onload="SwitchPic(0)">

<img src="1.jpg" border="0" name="roll">

</script>
</CENTER>
</BODY>
</HTML>

Mr J · 10-15-2005, 10:49 PM

Try this

PHP Code:


			
<HTML>

<HEAD>



<TITLE>Pantera In Concert With Slayer</TITLE>



<script type="text/javascript">

<!-- 



//Pictures to switch in between

var Rollpic1 = "Pic1.jpg";

var Rollpic2 = "Pic2.jpg";

var Rollpic3 = "Pic3.jpg";

var Rollpic4 = "Pic4.jpg";

var Rollpic5 = "Pic5.jpg";

var Rollpic6 = "Pic6.jpg";

var Rollpic7 = "Pic7.jpg";

var Rollpic8 = "Pic8.jpg";

var Rollpic9 = "Pic9.jpg";

var Rollpic10 = "Pic10.jpg";

var Rollpic11 = "Pic11.jpg";

var Rollpic12 = "Pic12.jpg";





var speed=2 //Time between pics switching in secs

var NumberOfPictures=12 //Number of pics:



var PicNumber=1



function SwitchPic(){



document.roll.src = window["Rollpic" + PicNumber]



PicNumber++



if(PicNumber > NumberOfPictures){

PicNumber=1

}





CallSwitchPic=setTimeout("SwitchPic()",speed*1000)

}



window.moveTo(200, 10)

window.resizeTo(600, 710)



//-->

</script> 

</HEAD>

<BODY onload="SwitchPic()">



<CENTER>



<img src="1.jpg" border="0" name="roll">





</CENTER>



</BODY>

</HTML>

electric_4_ever · 10-16-2005, 04:04 AM

ya, that coding didn't work for some reason. Thanks all the same though.

Nightfire · 10-16-2005, 04:08 AM

Not that good with javascript, but wouldn't it make more sense to put the images in an array?

Mr J · 10-16-2005, 08:37 AM

Quote:

ya, that coding didn't work for some reason. Thanks all the same though.

Not a very helpful reply, how exactly did it not work

I tried it in IE6, Mozilla, Firefox, and NS7

It is more common to use an array than ordinal numbered variables and would be something like this

PHP Code:


			
<HTML> 

<HEAD> 



<TITLE>Pantera In Concert With Slayer</TITLE> 



<script type="text/javascript"> 

<!--  



Rollpic= new Array()



Rollpic[0] = "Pic1.jpg"; 

Rollpic[1] = "Pic2.jpg"; 

Rollpic[2] = "Pic3.jpg"; 

Rollpic[3] = "Pic4.jpg"; 

Rollpic[4] = "Pic5.jpg"; 

Rollpic[5] = "Pic6.jpg"; 

Rollpic[6] = "Pic7.jpg"; 

Rollpic[7] = "Pic8.jpg"; 

Rollpic[8] = "Pic9.jpg"; 

Rollpic[9] = "Pic10.jpg"; 

Rollpic[10] = "Pic11.jpg"; 

Rollpic[11] = "Pic12.jpg"; 





var speed=1 //Time between pics switching in secs 



var PicNumber=0



function SwitchPic(){ 



document.roll.src = Rollpic[PicNumber] 



PicNumber++ 



if(PicNumber == Rollpic.length){ 

PicNumber=0 

} 





CallSwitchPic=setTimeout("SwitchPic()",speed*1000) 

} 



window.moveTo(200, 10) 

window.resizeTo(600, 710) 



//--> 

</script>  

</HEAD> 

<BODY onload="SwitchPic()"> 



<CENTER> 







<img src="Pic1.jpg" border="0" name="roll"> 





</CENTER> 



</BODY> 

</HTML>

rlemon · 10-16-2005, 08:19 PM

I have a nice script that not only scroll through the images, it fades between them.

seen here @ www.rlemon.com (webdesign)

electric_4_ever · 10-16-2005, 09:01 PM

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.

Mr J · 10-17-2005, 01:57 PM

Try the files in the attachment

rlemon · 10-17-2005, 02:46 PM

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).

rlemon · 10-17-2005, 03:10 PM

ok, here it is. include this code exactly where i tell you too:

in the header:

Code:

<style type="text/css" media="all">

#photoholder { width:153px; height:130px; background:#fff url('res/loading.gif') 100% 100% no-repeat;}
#thephoto {	width:153px; height:130px; border: 1px solid #000000; z-index: 1; position: absolute;}
#thebackground { z-index: 0; width:153px; height:130px;	border: 1px solid #000000;}

</style>

The next peice of code is optional. it is the image preloader script i got from DreamWeaver. it is pretty simple and i'm sure you could have found it somewhere else. but here it is:

Code:

<SCRIPT language="javascript">
<!--
function MM_preloadImages() {
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</SCRIPT>

The following is the gallery functions. this must also go in the header:

Code:

<script language="Javascript" type="text/javascript">

// IMAGE SCROLLER
var img = new Array('image1.jpg','image1.jpg','image3.jpg','image4.jpg','EOF');
var current = 0; // start image
var imgPath = "path/to/Image/";
var previous = "null";
var to;
var isLoading = 0;
var looping = 1;
function run_gal(interval, loopCount){
	if(looping <= loopCount){
	next_img();
	looping++;
	window.setTimeout(function() {run_gal(interval, loopCount)}, (interval*1000));
	} else {
	looping = 0;
	}
}

function next_img() { if(isLoading == 0){ imageId = 'thephoto'; backgroundId = 'thebackground'; bg = document.getElementById(backgroundId); image = document.getElementById(imageId); if(current >= 1){if(img[current] != "EOF"){previous = (current-1);} else { previous = (current-1); current = 0;}}
if(previous == "null"){previous = 0;} else {bg.src=imgPath+img[previous];} image.src=imgPath+img[current]; current++;
setOpacity(image, 0); image.style.visibility = 'visible'; fadeIn(imageId,0);}
return;}
function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; obj.style.filter = "alpha(opacity:"+opacity+")"; obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100;}
function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; toRate = 50; if(current == 0){ toRate = 0;}
to = setTimeout("fadeIn('"+objId+"',"+opacity+")", 50); isLoading = 1;} else { isLoading = 0;}
}
}

</script>

configuring of the code above:

the only things you should need to alter in the JS is the config i have setup:

Code:

var img = new Array('image1.jpg','image1.jpg','image3.jpg','image4.jpg','EOF');

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 :

Code:

onLoad="setTimeout(function(){run_gal('5','99')},1000); MM_preloadImages('path/to/image1.jpg','path/to/image1.jpg','path/to/image3.jpg','path/to/image4.jpg');"

Note, thisis where you must include the path to the images. Not the url, the path. I.E
www.yourDomain.com/images/image1.jpg
is WRONG

images/image1.jpg
is RIGHT

and now for the html:

Code:

			<div id='photoholder'>
			<img src='res/blank.gif' alt='Photo' id='thephoto' />

			<img src='res/blank.gif' alt='Photo' id='thebackground' />
			</div>

ohh, and here is a link to the two images i have left in here (blank.gif, and loading.gif) you can replace them if you please.

http://rlemon.com/new_sites/grl/res/blank.gif <-- blank.gif
http://rlemon.com/new_sites/grl/res/loading.gif <-- loading.gif

if you are having trouble installing this script post your code and i'll take a look.

electric_4_ever · 10-17-2005, 08:25 PM

ok, before i try all this coding, i just want to know, does it matter what type of image files you use? will it work with .jpg files? or only .gif?

rlemon · 10-17-2005, 08:37 PM

hrmm, i thought having a jpg in the example array would have awnsered that

but yes jpg is supported, i havn't attempted to run any bmp's or png's in it, but jpg and gif are both supported.

I also have a thumbnail generator in php (laggy) if you are interested.

electric_4_ever · 10-17-2005, 08:42 PM

alright. thanks. as soon as i get a break from my homework *rolls eyes*, i will try the coding and get back to you and let you know if it works or not. thanks once again