# Changing pictures



## Acer2000 (Sep 17, 2006)

Hi all,

I have put together a website using a table and cells using MS Frontpage 2003. I have five pictures with a size of 552 x 344 and I would like to make these pictures change every three seconds. This will make the website lively. 

I have never been taught how to build websites. All I know is how to put together a table and add cells, pictuers, text etc in the inside. I have also no html knowledge. 

I would be very grateful if you could help me realize my dream of making these pictures change and hope you can explain it to me easily as I have limited knowledge. When you give me a code, please let me know where to insert it exactly. But then, you are the masters!

Love you:heartlove

And thenk you very much:wave:


----------



## FredT (Nov 16, 2007)

I'm just learning javascript now... This could be a nice challenge for me :wink: (even though it seems pretty simple!). I'll try and make something that works and get back to you (after I eat dinner :grin: It's about 6:10 EST). Also, do the images have to fade? Or could they just change from one to the other?


----------



## Acer2000 (Sep 17, 2006)

Thank you. It is good that you are a beginner because you can teach me better than an expert! 

If the pictures change, then this is just fine. 

I look forward to communicating with you soon.:wave:


----------



## FredT (Nov 16, 2007)

Just to clarify, you have five pictures all to show up in one spot at different times. Correct?

Also, if you'd like them to fade, it may be possible, just let me know if you would prefer fading or non-fading transitions.


----------



## jamiemac2005 (Jul 5, 2007)

Hey, this sounds quite simple so i'll tap out some code for you:

- The following would go in the <head> section of your code:
*Edit: Read next post, code removed*
Cheers,
Jamey

p.s. as for learning to do this yourself, you could learn at www.w3schools.com they're the best free tutorials on web-building online. (which i strongly suggest you do, the result will be much better than it is with frontpage, and you'd be able to do what you'd requested yourself)... you'd need to learn HTML, CSS & Javascript.

p.p.s it would be nice in future if you could post your code/ a link to the site along with your query because it would allow us to easily model the code around your's. (It wasn't too hard in this case though =])


----------



## jamiemac2005 (Jul 5, 2007)

Sorry changing the code a little because it isn't correct for all 5 images, although it sounds aas if FredT is also writing something so i'll wait to see what he posts back.


----------



## Acer2000 (Sep 17, 2006)

"Just to clarify, you have five pictures all to show up in one spot at different times. Correct?

Also, if you'd like them to fade, it may be possible, just let me know if you would prefer fading or non-fading transitions."



Yes, they are now 10 pictures in one spot i.e. in a cell. Fading is ok, but I would like them to change. 

Acutally, I have another spot, which I would like to have the pictures change, I have got four pictures for this spot however. 

I appreciate your help.:wave:


----------



## jamiemac2005 (Jul 5, 2007)

Hey again, i hate to ask but you have 5 moderately sized images on your page which you want to be "lively"... a major trap most non-experienced web-designers fall into is that of putting lots of images on their site and then animating them (drawing attention away from their actual content)... could we see the code? &/ the images (the filesize of the images will come into play a lot aswell). 

Cheers,
Jamey

(btw if you could post your code in

```
tags it would help us loads).

Also, you probably wont find this kind of help in the future on this forum so quickly (two developers who enjoy coding wanting to help by writing you some code) without having first made a good attempt at trying to code it yourself[hence www.w3schools.com ].
```


----------



## Acer2000 (Sep 17, 2006)

"Hey again, i hate to ask but you have 5 moderately sized images on your page which you want to be "lively"... a major trap most non-experienced web-designers fall into is that of putting lots of images on their site and then animating them (drawing attention away from their actual content)... could we see the code? &/ the images (the filesize of the images will come into play a lot aswell). 

Cheers,
Jamey

(btw if you could post your code in

```
tags it would help us loads).



Also, you probably wont find this kind of help in the future on this forum so quickly (two developers who enjoy coding wanting to help by writing you some code) without having first made a good attempt at trying to code it yourself[hence www.w3schools.com ]. "



You know what, if I wanted to look this up in Google I could have done so. I am asking for help here becuse I like to be taught how to do it by sombody! :mad:
```


----------



## FredT (Nov 16, 2007)

Okay, jamiemac was just trying to HELP you by giving you a warning that you may not find this kind of help in the future and that it may be a good idea to learn to code for yourself. Anyways.

This is the code I came up with. Instructions are below.


```
<img src="images/image1.jpg" name="targetImage" id="1">

<script type="text/javascript">

//Step 1
setInterval("changePic();", 3000);

//Step 2
function changePic(){
	
	//Step 3
	var currentPic = document.images['targetImage'];
	
	//Step 4
	var currentPicId = parseInt(currentPic.id);
	
	//Step 5
	if(currentPicId+1 == 11){
		currentPic.src = "images/image1.jpg"
		currentPic.id = 1;
	}
	
	//Step 6
	else {
		var currentPicSrc = 'images/image'+(currentPicId+1)+'.jpg';
		currentPic.src = currentPicSrc;
		var newPicId = currentPicId+1;
		currentPic.id = newPicId;
	}
}


</script>
```
Setup Instructions:

First, take all your images and put them in a folder on your server called "images" (without the quotes). It is important that they are named image1.jpg image2.jpg image3.jpg image4.jpg etc.

Good so far?

Now put the <img> code I included at the top of the code block where you want the images to show up in your site (inside your <td> or something, just like usual). You're best off to copy paste because the src, name, and id all have to be exactly as I put.

Ok, now for the script.

Place the whole <script> to </script> area at the very end of your page code, just before the </body> tag.

You're done!

Now I'll explain what the code means and how you can edit it.

I've included comments in the script that say //Step 1 //Step 2 etc. I will refer to those now.

Step 1: Sets the interval at which the pictures change. It is saying "set the the changePic function to occur every 3000 milliseconds" which just happens to be 3 seconds.

Step 2: Declares that this is the set of actions that needs to take place to change the picture. That function is named changePic.

Step 3: Identifies the current picture as whatever image is named "targetImage" (remember the <img> tag? it says <image blah blah name="targetImage")

Step 4: Identifies that the ID of the current picture is... the ID of the current picture :wink: What the parseInt() does is turns a string of text (like "2") into a number the computer can read (like 2). Make sense? Maybe not...?

Step 5: Checks if the next image is going to be image number 11. If it is, we don't have an image number 11, we only have 10. Therefore, it sets the img src and id back to 1 to start the process over again.

Step 6: In the even that the next image isn't 11, we've still got more images to go! So it updates the picture src and id to what ever it used to be plus one more. So if it used to be img 6, it is telling it to become img 7.

I hope this makes sense to you. If you have any questions, let me know!


----------



## Acer2000 (Sep 17, 2006)

Hi,

Can you pase the code in the form iteself please so I can copy and past it? I tried to type it on a word document but it did not work properly. I appreciate your help brother/sister. :wave:

Thank you. 

PS: I know I would not be getting help in the future, but I know this place is very special. :wink:


----------



## Acer2000 (Sep 17, 2006)

I have copied the code exactly as you put it and it did not work for me. I have not amended anything.


----------



## jamiemac2005 (Jul 5, 2007)

Hey again Acer2000, 

i apologise if i came accross strongly, i was literally just making the point that you may not get the help so willingly in the future(because i've seen many code request-like threads where people are simply told to go and learn to do it themselves).

It just so happens that there are at least 2 web-developers here whom are eager to help (it does help us aswell, it satisfies our own curiousity and gives us some good experience).

As for your most recent problem, you'll have to use a text editor to insert this code into your page(as apposed to a word processor) because word-processing programs add formatting code, etc. (To do that right click your current web-page and and click open with->notepad/other program if it's not there, then FredT's setup instructions work great)

Cheers,
Jamey

p.s. you probably will get help in the future, i just wanted to warn you that you may be met with "go and read the tutorials here".


----------



## Acer2000 (Sep 17, 2006)

<script type="text/javascript">

//Step 1
setInterval("changePic();", 3000);

//Step 2
function changePic(){

//Step 3
var currentPic = document.images['targetImage'];

//Step 4
var currentPicId = parseInt(currentPic.id);

//Step 5
if(currentPicId+1 == 11){
currentPic.src = "images/image1.jpg"
currentPic.id = 1;
}

//Step 6
else {
var currentPicSrc = 'images/image'+(currentPicId+1)+'.jpg';
currentPic.src = currentPicSrc;
var newPicId = currentPicId+1;
currentPic.id = newPicId;
}
}

</script>


----------



## Acer2000 (Sep 17, 2006)

Dear Jamey,:smile:

Thank you. I appreciate your advice. 

I just pasted the code on the current thread, should I be making amendment to it?:wave:


----------



## Acer2000 (Sep 17, 2006)

I have put together 8 images in a folder and named them according to the instruction. I have them in a folder and uploaded the folder to the server. Then I copied and pasted the code from the editor into the designated area of the website and uploaded the index page. It did not work!


----------



## jamiemac2005 (Jul 5, 2007)

Hmm, could you give us a link to the site, or upload the content of your index page. (It would allow us to give you definitive instructions for putting this together)


----------



## Acer2000 (Sep 17, 2006)

Unfortunately, I would not feel comfortable doing this:sigh:

should i remove the following from the code:

//Step 1

//Step 2

//Step 3

//Step 4

//Step 5

//Step 6


----------



## Acer2000 (Sep 17, 2006)

I feel lost in the code:4-dontkno


----------



## Acer2000 (Sep 17, 2006)

In the status bar in IE7 it shows: Done, but with errors on page"

I have no idea what that is!


----------



## Acer2000 (Sep 17, 2006)

Nothing seems to be working for me today!


----------



## jamiemac2005 (Jul 5, 2007)

> Unfortunately, I would not feel comfortable doing this


Can i ask why not? it would allow us to help you completely, rather than stabbing in the dark.

Click the "done but with errors on page", and click details and copy the data from there, it may hold the answer.

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

the site has pictures of me Jamey. This is why.


----------



## jamiemac2005 (Jul 5, 2007)

Oh that's perfectly reasonable, don't post the pictures then, we have all the information we need (the size of them) and we're concentrating on the code, so the images are un-neccessary. Just copy the code and rid of any reference to the site's URL and any reference to the source of the images. At the least it would give us a clue to the structure of your code and it should help us to fix your problem.

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

It states:

'id' is null or not an object

code: 0


----------



## Acer2000 (Sep 17, 2006)

Line 218

Char 2

'id' is null or not an object

code: 0


----------



## jamiemac2005 (Jul 5, 2007)

Hey, i'm hoping that line 218 is:


```
var currentPicId = parseInt(currentPic.id);
```
Though it doesn't matter which it is. I *think* i know the problem. is the id of the image you want to change "targetImage" ? if not then change the part where it says 'targetImage':

```
//Step 3
var currentPic = document.images['targetImage'];
```
To the id of the image, if the <img> tag doesn't have an id then add it:

```
<img src="whateverImage.jpg" id="targetImage" />
```
Of course that's only if you haven't done that.

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

<script type="text/javascript">


setInterval("changePic();", 3000);


function changePic(){


var currentPic = document.images['targetImage'];


var currentPicId = parseInt(currentPic.id);


if(currentPicId+1 == 2){
currentPic.src = "images/image1.jpg"
currentPic.id = 1;
}


else {
var currentPicSrc = 'images/image'+(currentPicId+1)+'.jpg';
currentPic.src = currentPicSrc;
var newPicId = currentPicId+1;
currentPic.id = newPicId;
}
}

</script>


----------



## Acer2000 (Sep 17, 2006)

I have attached the code


----------



## jamiemac2005 (Jul 5, 2007)

Hey, thanks, it was as i thought and the id was missing from the image:

```
<img border="0" [b]id="targetImage"[/b] src="images/26.jpg" width="552" height="344">
```
I'm unsure if this is the image you want to use but it seems correctish, (i haven't looked at the page, only the code involved so i don't actually know.

The script was in the bottom of the body aswell, which would not have stopped it from working, but it's technically better practice to put it within the <head> and </head> tags.

You'll now have to look at the code:

```
'images/'+(currentPicId+1)+'.jpg';
```
so that your images are named correctly (e.g. the first image should be images/image1.jpg and the second should be images/image2.jpg, if they're not either modify the code or change the actual images' filenames.

I've re-attached the new (fixed) code. It should work but is untested.

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

Hi Jamey,

Thank you for your efforts. But it is still not working.


I have no idea where the following code should be standing:


<img border="0" id="targetImage" src="images/26.jpg" width="552" height="344">


----------



## jamiemac2005 (Jul 5, 2007)

Take a look in the file i attached, the code is already there in the code you uploaeded just without the "id='targetImage'" bit...


----------



## FredT (Nov 16, 2007)

Edit - Post deleted. I didn't realize there were more posts!


----------



## FredT (Nov 16, 2007)

No, no, no... you are using my script, right?

BOTH the name and the id need to be set on the image. The NAME is "targetImage" and the ID is "1". This is probably the problem.

Sorry... my code kind of goes about the problem in a round about way, but it worked perfectly on my comp.

Also, looking at your code I see two images. Which one do you want to change?

Here is the code that worked for me.


```
<html>
<body>

<img src="images/image1.jpg" name="targetImage" id="1">

<script type="text/javascript">

//Step 1
setInterval("changePic();", 3000);

//Step 2
function changePic(){
	
	//Step 3
	var currentPic = document.images['targetImage'];
	
	//Step 4
	var currentPicId = parseInt(currentPic.id);
	
	//Step 5
	if(currentPicId+1 == 6){
		currentPic.src = "images/image1.jpg"
		currentPic.id = 1;
	}
	
	//Step 6
	else {
		var currentPicSrc = 'images/image'+(currentPicId+1)+'.jpg';
		currentPic.src = currentPicSrc;
		var newPicId = currentPicId+1;
		currentPic.id = newPicId;
	}
}


</script>
</body>
</html>
```


----------



## jamiemac2005 (Jul 5, 2007)

Ahh, okay i understand it a little better now, so he need the image to have the name "targetImage" and the id "1"...
It is an interesting script, i didn't look too deeply into it (though did see the changing of the ID).

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

Something seems to be working Jamey. It makes a turn but then there is only white. i.e. it is not showing the second image.

Attached is the code that worked.


----------



## jamiemac2005 (Jul 5, 2007)

As previously stated the image names need to be "images/image*.jpg" * being 1,2,3 etc. If the images are of large filesizes they will take time to load (unless on your local computer).

And as it's FredT's script i think he knows a lot more about it than me so i'll leave him to look at it and continue helping you.

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

Thank you for all the input Jamey. The next image is not loading at all.

Just a quick question, the image names I have are as follows: image1.jpg, image2.jpg etc.. Is this corrrect or am I missing something? Please advice me? Thank you. 


I will keep working with Fred


----------



## jamiemac2005 (Jul 5, 2007)

As long as the images are within the folder "images" then yes that's correct =]

I'm sure he'll be able to help you better, hope all goes well.

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

Thank you Jamey. 

Fred, the code does not work.


----------



## Acer2000 (Sep 17, 2006)

Nothing is working for me :-(


----------



## FredT (Nov 16, 2007)

Alright, the better one.txt you uploaded says if blah blah+1 == 2... as long as that 2 is a 2, it won't change... how many images do you have. Let's say 3. If you have 3 images, that number needs to be a four.


----------



## FredT (Nov 16, 2007)

I'm also looking at the original .txt that was uploaded with all the code in it and if you could just let me know which one of those two images you want to be the one that changes, I'd be able to send you back a fully working page.


----------



## Acer2000 (Sep 17, 2006)

It is seems I will have no success in this project.


----------



## Acer2000 (Sep 17, 2006)

I have 9 images that I have renamed according to your instructions. I am looking to make the image with the size 552x344


----------



## Acer2000 (Sep 17, 2006)

I have nine images with the size 552x344 the image names go as image1.jpg etc


----------



## Acer2000 (Sep 17, 2006)

Sorry for being negative in my post. I Apologize.


----------



## FredT (Nov 16, 2007)

Ok here is what I'm guessing will work.


----------



## Acer2000 (Sep 17, 2006)

I thank you from the very bottom of my heart Fred. You are a gem. It is working now! How can I make the images take a little longer to change is it possible to got with 5 seconds easily?


----------



## FredT (Nov 16, 2007)

Yes...

solution...
where it says: 

setInterval("changePic();", 3000);

change it to

setInterval("changePic();", 5000);

Explanation...
That number is how long it takes to change the picture (in milliseconds)

so if you wanted it to take 7 seconds it would be 

setInterval("changePic();", 7000);

Good luck


----------



## Acer2000 (Sep 17, 2006)

Thank you Fred, this is great. You have taught be something wonderful and I am grateful for your support and patience with me.

Is it possible to have text showing on the images?


----------



## Acer2000 (Sep 17, 2006)

I espcially like the way images change on the following website:

http://www.colgate.edu/

Do you think a few lines of code can be added to my website in order to achieve this result?


----------



## FredT (Nov 16, 2007)

No problem.

And no, http://www.colgate.edu/ used flash to do that, not javascript so it would be extremely difficult. But there is kind of a possibility to do something similar... do you know any HTML... AP Divs in particular?

If you put an ap div over the image you could have it so that you could roll over some text and words would appear on top of the image. But they would not be animated like that.

So actually, yes you could do something similar, but it would not be animated.


----------



## FredT (Nov 16, 2007)

Oh wait, were you talking about the fades or the words at http://www.colgate.edu/ ?

Please give a little more info?


----------



## Acer2000 (Sep 17, 2006)

Unfortunately, I have no html or AP Divs knowledge. I do it all in FP 2003.

I like to have it so that when a new pictures comes, it has text about the things I will offer. When a new picture comes, it will have text different from the previous one and so forth....

I also have a problem in my website and that is, I have created two cells that are horizontally adjacent to one another, the left cell has text and the right text has a small picture which I inserted. In IE the separtor does not show up, however it does show up when I view it in Firefox. I would hight appreciate your help Bro. Fred


----------



## Acer2000 (Sep 17, 2006)

No I was talking about the fades on the Colgate homepage


----------



## Acer2000 (Sep 17, 2006)

I am uploading snapshots. No. 2 was views in FF and shows a dividing line between the blue area and the area where the eagle is located.


----------



## Acer2000 (Sep 17, 2006)

I have tested my website after I put the Javascript and the pictures take long to load even on a broad band connection. Any idea how to make them load more quickly? I don't want to make them smaller however.


----------



## FredT (Nov 16, 2007)

Ok, here we go.

The fades could probably accomplished easily... I'll look into it.

The dividing line I would say... if you want it, set border equal to 1 on that table if you want the line, I'm not too familiar with frontpage (I think that's what you said you were using) but that would probably be it if you can figure out how to set the border.

As for the image loading, you need to preload the images, I will think up something for that too.


----------



## Acer2000 (Sep 17, 2006)

I will wait for the master's help


"As for the image loading, you need to preload the images, I will think up something for that too".


How can i preload the images? I will wait for your advice.:wave:


----------



## jamiemac2005 (Jul 5, 2007)

Here's a generic image preloading script:

```
<script language="javascript">
function preload(){
	if (document.images){
		var toLoad = preload.arguments;
		var loadArray = new Array();
		for (var a = 0; a<toLoad; a++){
			loadArray[a] = new Image();
			loadArray[a].src = toLoad[a];
		}
	}
}
window.onload = preload('images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg', 'images/image4.jpg', 'images/image5.jpg', 'images/image6.jpg', 'images/image7.jpg', 'images/image8.jpg', 'images/image9.jpg');
</script>
```
It should work as-is for your page(i think you're using 9 images if you're using more just add them to the list of images.)

You'd have to add it below the other script. Or if you post the most recent code you're using we could post back with a cleaner solution.

as for fading, it is possible, i could probably have something working along-side the script you already have but it would take me a while so i will post back.

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

It would also be ok with me if a new image comes up every time a visitor refreshes the pages. Do you have the code that can do this?


----------



## Acer2000 (Sep 17, 2006)

Ok, let me try the pre-load script Jamey


----------



## Acer2000 (Sep 17, 2006)

Hi Jamey,

I gave it a test by inserting it underneath the other script. It did not work well, and it showed that there was an error on the page. I am attaching how i put the two scripts together.


----------



## jamiemac2005 (Jul 5, 2007)

hey again, what you've done is what i'd expected (it should work), what is the error it gave?

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

Line: 248
Char: 1
Error: Not Implemented
Code:0


----------



## jamiemac2005 (Jul 5, 2007)

hmm, i don't know what could be causing that, maybe FredT has something that you can use (because that script is old i haven't usd i in a while)...

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

Yes, possible.


----------



## Acer2000 (Sep 17, 2006)

Hi,

I would like to thank you for all the help you provided. 

I just would like to have a code that will make a picture change once the visitor refreshes their browser, like this one: www.yale.edu. 

I will not post again to bother you with my questions. Appreciate your help. :wink:


----------



## FredT (Nov 16, 2007)

You're not bothering me. I've almost got a perfect script over here that accomplishes everything... preloading the images, changing the images, fading, and selecting a random start image. Just a little more time... I've been very busy lately.


----------



## Acer2000 (Sep 17, 2006)

Thank you Brother Fred:wave:


----------



## FredT (Nov 16, 2007)

I finally worked out a script that looked perfect on Safari and Firefox (Mac) but when I brought it to my Windows machine to test, it was a mess on IE and Firefox (Windows). I'll have to do some more fixing.


----------



## Acer2000 (Sep 17, 2006)

Cool! I will wait:wave:


----------



## sunnee (Aug 16, 2008)

Thanks!


----------



## FredT (Nov 16, 2007)

Error, re-posting


----------



## FredT (Nov 16, 2007)

:sigh: Oh darn, this is the second time I've had to type this.

I've had some problems with my script. It only works perfectly in Safari. Help anyone? :tongue:

Here is how my code works. There are three divs on top of eachother. The div in the background contains the image that people see most of the time. It changes every 'x' seconds. Then there is an image in the div above that div that holds the image coming up next and stays hidden most of the time that fades in every 'x'-1 seconds for one second... so it appears that the images have faded together. Then the image in the background changes to match the image that just faded in and the image that just faded in disappears and changes to the next image. Confused? Sorry, I didn't do a great job of explaining it. :tongue:

The image is referenced by its name and it's position in the timeline (the first image the second image the third image etc) is referenced by its ID.

The third div (on the very top) contains the text that goes over the images that Acer requested.

Well that's about it... hopefully you can figure out what I'm trying to do by looking at my code. Thanks.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
#changer		{
			position:relative;
			}
			
#backgroundChanger	{
			position:absolute;
			left:0px;
			top:0px;
			z-index:1;
			}

#faderChanger		{
			position:absolute;
			left:0px;
			top:0px;
			z-index:2;
			}

#textChanger		{
			position:absolute;
			left:15px;
			top:300px;
			z-index:3;
			color: #FFFFFF;
			font-size: 30px;
			}		
</style>

</head>
<body onload="loadImgs">
<div id="changer">
	<div id="backgroundChanger">
    <img border="0" src="images/image1.jpg" width="552" height="344" name="bgImage" id="1">
    </div>
    <div id="faderChanger">
    <img border="0" src="images/image2.jpg" width="552" height="344" name="targetImage" id="2">    </div>
  <div id="textChanger">
    </div>
</div>
<script type="text/javascript">

//***Stuff to change***\\

//How long each picture displays for in seconds
var picTime = 3;

//How many images you have
var numPics = 5;

//Create the array for the image texts
var text = new Array();
//I'd rather not use text[0] just to keep things simple
text[0] = null;

//Text you want to appear over images
text[1] = "Your text here";
text[2] = "Other text here";
text[3] = "Third text here";
text[4] = "Whatever you want to say...";
text[5] = "... say it here!";


//***Permanent***\\

//Image Preloader
function loadImgs(){
	if (document.images) {
		preload_image_object = new Image();
		for(i=1; i<=numPics; i++) 
		preload_image_object.src = "image"+i+".jpg";
	}
}

//Set intervals for the pics to change
setInterval("changePic();", picTime*1000);\
//Setup the first fade, after that it's set inside changePic()
setTimeout("initFade();",(picTime-1)*1000);

//Set the "fading" image to transparent
document.images['targetImage'].setAttribute('style', 'opacity: 0; filter: alpha(opacity=0);');

//Set the text for the first image, after that it's in changePic()
var firstText = document.getElementById('textChanger');
firstText.innerHTML = text[1];

//Now for the good stuff
function changePic(){

	//The variables
	var textfield = document.getElementById('textChanger');
	var bgPic = document.images['bgImage'];
	var bgPicId = parseInt(bgPic.id);
	var currentPic = document.images['targetImage'];
	var currentPicId = parseInt(currentPic.id);
	
	//Check if the background image needs to go back to image1.jpg
	if (bgPicId == numPics) {
		
		//Determines what the next pics src will be	
		var currentPicSrc = 'images/image'+(currentPicId+1)+'.jpg';
		bgPic.src = "images/image1.jpg";
		
		//Initiate the next fade one second from the next pic change
		setTimeout("initFade();", (picTime-1)*1000);
		
		//Now that the fade has finished we need to hide foreground image
		currentPic.style.opacity = 0;
		currentPic.style.filter = 'alpha(opacity=' + 0 + ')';
		
		//Update the foreground image to what's coming next
		currentPic.src = currentPicSrc;
		
		//Update the text
		textfield.innerHTML = text[1];
		
		//Update the picture's id
		var newPicId = currentPicId+1;
		bgPic.id = 1;
		currentPic.id = newPicId;		
	}
	
	//Check if the foreground image needs to go back to image1.jpg
	else if (currentPicId == numPics) {
		var bgPicSrc = 'images/image'+(bgPicId+1)+'.jpg';
		bgPic.src = bgPicSrc;
		setTimeout("initFade();", (picTime-1)*1000);
		currentPic.style.opacity = 0;
		currentPic.style.filter = 'alpha(opacity=' + 0 + ')';
		currentPic.src = "images/image1.jpg";
		var newPicId = bgPicId+1;
		textfield.innerHTML = text[bgPicId+1];
		bgPic.id = newPicId;
		currentPic.id = 1;		

	}
	
	//Nothing needs to reset
	else {
		var bgPicSrc = 'images/image'+(bgPicId+1)+'.jpg';
		var currentPicSrc = 'images/image'+(currentPicId+1)+'.jpg';
		bgPic.src = bgPicSrc;
		setTimeout("initFade();", (picTime-1)*1000);
		currentPic.style.opacity = 0;
		currentPic.style.filter = 'alpha(opacity=' + 0 + ')';
		currentPic.src = currentPicSrc;
		var newBgPicId = bgPicId+1;
		var newPicId = currentPicId+1;
		textfield.innerHTML = text[bgPicId+1];
		bgPic.id = newBgPicId;
		currentPic.id = newPicId;	
	}

}

//The fading function
function initFade() {
	for (var i=0;i<=10;i++)
		setTimeout('setOpacity('+i+')',100*i);
	
}

function setOpacity(value) {
	var currentPic = document.images['targetImage'];
	if (value >= 10) {
		//When the fade is done (at 10), hide the image
		currentPic.style.opacity = 0;
		currentPic.style.filter = 'alpha(opacity=' + 0 + ')';
	}
	else {
		currentPic.style.opacity = value/10;
		currentPic.style.filter = 'alpha(opacity=' + value*10 + ')';
	}
}

</script>   
  
</body>

</html>
```


----------



## FredT (Nov 16, 2007)

I will be uploading a working version of the code here and a version that will help you see how the code works if you are confused here. My account hasn't been verified yet, but it will be about 10 minutes from now, so if the links don't go anywhere, they will soon.


----------



## jamiemac2005 (Jul 5, 2007)

Hey, i don't know exactly what you were having problems with (if you could describe it it would help because i don't have safari on my pc[right now]).

Anyway i found 2 small things in the script you posted;
1) the image preloading function was run before it was defined:

```
<body onload="loadImgs">

//came before the actual defenition of the function
```
To fix it:

```
Change the body tag so it's just the tag(remove the onload handler):
<body>

and add the following to the end of the script:
window.onload = loadImgs;
```
2) (a random character "\" was on the end of a line):

```
setInterval("changePic();", picTime*1000);[b]\[/b]

//of course to fix it you just rid of it.
```

After i fixed those two things on my pc it ran fine, though i havent yet installed safari (I don't like apples obtrusive update etc.) but i will do at some point and see if i can work out what's wrong..

Cheers,
Jamey


----------



## FredT (Nov 16, 2007)

Actually, Safari was the only browser I found it actually WORKED on. I'm surprised you found the script to be functioning properly on whatever browser(s) you were using. The problem I was talking about was after it went through one or two cycles of the pictures it would start flickering images and eventually it would fade less and less and then just stop fading at all and just flicker and change and stuff. It just seemed like some minute timing differences that got wider each time a picture changed. I will fix those two problems and run the script again on Fx and IE and see what happens.

And I agree, Apple's update system for Windows is awful. Between Quicktime, iTunes, and Safari, it's constantly popping up on my Windows machine. It's not too bad on Macs though (kind of ironic).

So if you watch the five pictures (or however many you are testing with) for 2 or 3 cycles and its still working fine (on Fx or IE) I'd be surprised. Let me re-check though.

Thanks for your help by the way


----------



## FredT (Nov 16, 2007)

Okay, I finally got those links working... I just threw in some pics from Google's HQ to replace my own. I guess that was the first thing I could think of while searching Google Images :tongue:

Just thought it would be convenient so you wouldn't have to recreate your own page with your own pictures.

And I am still experiencing the flickering in Fx. Haven't checked IE. I don't understand this because the set opacity line comes before the change src line. When I view it with the divs split apart, the image seems to be changing to disappearing after has already changed.

Here is the one for the actual slideshow.

Here is the one with two divs revealed for testing.


----------



## jamiemac2005 (Jul 5, 2007)

Heyheyhey, i came accross a minor breakthrough, i narrowed down the problem to fading(as we've already worked out)... And found the buggy bit of the script:


```
function initFade() {
	for (var i=0;i<[b]=[/b]10;i++)
		setTimeout('setOpacity('+i+')',100*i);
	
}
```
The problem here is that you're initializing i as 0 but then going to 10 (rather than 9) so the opacity is reset 11 times rather than 10, which is what's causing the flickering effect (i did see it when i re-tested[i should have been paying more attention the first time round]).

Hence change it to:

```
function initFade() {
	for (var i=0;i<10;i++)//so that there are only 10 steps(using < rather than <= )
		setTimeout('setOpacity('+i+')',100*i);
	
}
```
And it should work fine.

Also i tested it in FF and it worked fine, in IE the first fade doesn't show, but after that works fine (i think this is because of the filter on the objects but i don't know how to fix it[IE's buggy rendering i guess, you could try adding the filter to the CSS so that when the page is loaded it is already there]). But yeah, works fine on FF3, works apart from a slight bug in IE7, you'll have to check safari(but it should work there aswell)...

In all honesty i could use safari and just completely disable apple's updater, but i haven't been doing a whole lot of cross-platform development in a while so i haven't had it on my PC in a while(normally i'd have opera aswell).

Cheers,
Jamey


----------



## jamiemac2005 (Jul 5, 2007)

Hey again,

another small piece to add, i mentionned a bug in IE7. In that the first fade didn't show, i worked out that it was because this line of code was not running correctly(in IE7):


```
//Set the "fading" image to transparent
document.images['targetImage'].setAttribute('style', 'opacity: 0; filter: alpha(opacity=0);');
```
Basically to fix it i took that line out and changed the 2nd image's tag to include that style rule to start with(then it worked in both FF and IE):

```
<img border="0" src="images/image2.jpg" [b]style="opacity: 0; filter: alpha(opacity=0);"[/b] width="552" height="344" name="targetImage" id="2">
```
And now it works fine in both(in my tests)...

Cheers,
Jamey

p.s. good work with that script btw =]


----------



## Acer2000 (Sep 17, 2006)

Hi there,

That was exciting really! All of us have experimented:smile:

This best way would be to do all this as flash rather than Javascripting. Do you know of flash software that one can afford? Adobe's is too expensive for me.


----------



## FredT (Nov 16, 2007)

Well, I don't totally agree that Flash is the best way to do this. Unless you load the images at runtime (which I have never done before) you are looking at quite a long download for dial-up users, as supposed to this script which preloads the images.

In addition, it would take you a while to learn how to use Flash and there really are no good alternatives to the very pricey software. There is only one program I know of that is ok, but I don't know how it does with bitmaps. My friend uses it (or used to) so I'll get the name of it from him.

But since the script has been all worked out now, I will put it in your html .txt file you posted a while ago and you can put it on your site working perfectly. Wouldn't that be the easiest thing considering it's finished already?


----------



## sobeit (Nov 11, 2007)

flash is the best, the bad thing about scripts is its may not work for all browsers, it may break with browser updates, or nothing will show if script are turned off. You have just as long download time whether it be javascripts or flash. 

As far as a good flash alternative there is swish. Its cheap and it will do exactly what you want. 

That said, you can get some good free image scripts at

http://wsabstract.com/script/cutindex21.shtml

also do an online search for free flash generators. You may be able to get what you want that way.


----------



## Acer2000 (Sep 17, 2006)

Sobeit,

Thank you very much for recommending the software and for the website and the advice. Much appreciated:wave:


----------



## Acer2000 (Sep 17, 2006)

The below code was created using the trial version of swish minimax2:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="userboy">
<meta name="generator" content="SWiSH miniMax2 (2008.08.12) www.swishzone.com">
<meta name="description" content="">
<!-- Created by SWiSH Max2 - Flash Made Easy - www.swishzone.com -->
</head>
<body bgcolor="#FFFFFF">
<center>




 </center>
</body>
</html>


----------



## Acer2000 (Sep 17, 2006)

Where do I exactly post the above code (I want to place it in the area for the large picture. Will be grateful for your helpray:


Here is the source code of the website:


<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title> </title>
</head>

<body bgcolor="#BDBD9B">

<div align="center">
<table cellpadding="0" cellspacing="0" border="1" bordercolor="#FFFFFF" bgcolor="#FFFFFF" width="822" height="740">
<!-- MSTableType="layout" -->
<tr>
<td bgcolor="#000080" bordercolor="#000080">
<p align="center">
<img border="0" src="images/aigle2.jpg" width="117" height="121"></td>
<td bgcolor="#000080" colspan="3" height="122" bordercolor="#000080">
<font size="5" face="Old English Wd" color="#000080">    </font><font size="5" face="Tim3" color="#FFFFFF">   My 
Personal Website</font><font size="5" face="Old English Wd" color="#FFFFFF"> </font>
<font size="1" color="#FFFFFF" face="Verdana"> </font><font size="2" color="#FFFFFF" face="Verdana">  </font><font face="Verdana" size="1" color="#FFFFFF">  </font></td>
</tr>
<tr>
<td valign="top" bgcolor="#E8E3E7" bordercolor="#C0C0C0" colspan="2" height="177">
 </td>
<td valign="top" rowspan="2" colspan="2">
<img border="0" src="images/26.jpg" width="552" height="344"></td>
</tr>
<tr>
<td valign="middle" colspan="2" bgcolor="#E8E3E7" height="170">
<p align="center">
My Text Here<font face="Verdana" size="1" color="#333333"><i><br> </i></font><i><font color="#000080" face="Verdana" size="1">
</font></i>
</p>
<p>
<font color="#800000" face="Verdana" size="1"> </font></p></td>
</tr>
<tr>
<td bgcolor="#808000" colspan="2"><b>
<font face="Verdana" size="2" color="#FFFFFF"> </font></b></td>
<td valign="middle" bgcolor="#8091A5"><b>
<font face="Verdana" size="2" color="#FFFFFF"> What's New?  </font>
</b></td>
<td bgcolor="#8091A5" height="27"><b>
<font face="Verdana" size="2" color="#333333"> Websites </font>
</b></td>
</tr>
<tr>
<td colspan="2" bgcolor="#E8E3E7" valign="middle">
<p>
<font face="Arial" size="1" color="#000080"> </font><font size="1" face="Verdana" color="#990000"><a style="text-decoration: none" href=><font color="#990000"> </font></a></font> </p></td>
<td bgcolor="#E8E3E7" valign="top">
<p>
<font face="Verdana" color="#000080" size="1"> </font></p>
<font face="Verdana" size="1" color="#333333"> I am cooking 
Spaghetti this evening. </font><b>
<font color="#000080" size="1" face="Verdana"> </font></b></td>
<td bgcolor="#E8E3E7" valign="top" height="178">
<font face="Verdana" color="#000080" size="1"> </font><font size="1" face="Verdana" color="#800000"> 
</font>
<p>
<font face="Verdana" color="#000080" size="1"> </font><font size="1" face="Verdana" color="#990000"><a href=" style="text-decoration: none"><font color="#990000"> </font></a> </font></p></td>
</tr>
<tr>
<td width="119"></td>
<td width="143"></td>
<td width="272"></td>
<td height="2" width="278"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="4" height="62"><font face="Verdana" size="1"> 
<font color="#333333">My Address</font></font><p>
<font face="Verdana" size="1" color="#333333">  
</font></td>
</tr>
</table>
</div>
<p align="center">
 </p>
<p align="center">
 </p>
<script type="text/javascript">


setInterval("changePic();", 3000);


function changePic(){


var currentPic = document.images['targetImage'];


var currentPicId = parseInt(currentPic.id);


if(currentPicId+1 == 2){
currentPic.src = "images/image1.jpg"
currentPic.id = 1;
}


else {
var currentPicSrc = 'images/image'+(currentPicId+1)+'.jpg';
currentPic.src = currentPicSrc;
var newPicId = currentPicId+1;
currentPic.id = newPicId;
}
}

</script>

</body>

</html>


----------



## Acer2000 (Sep 17, 2006)

"Well, I don't totally agree that Flash is the best way to do this. Unless you load the images at runtime (which I have never done before) you are looking at quite a long download for dial-up users, as supposed to this script which preloads the images.

In addition, it would take you a while to learn how to use Flash and there really are no good alternatives to the very pricey software. There is only one program I know of that is ok, but I don't know how it does with bitmaps. My friend uses it (or used to) so I'll get the name of it from him.

But since the script has been all worked out now, I will put it in your html .txt file you posted a while ago and you can put it on your site working perfectly. Wouldn't that be the easiest thing considering it's finished already?"


Dear Fred,

Believe it or not, but it is only at this minute that I saw your post. I apologize. 

Yes, I would appreciate it if you could put the new script you come up with in the txt file I posted a while ago. 

I look forward to hearing from you. Thank you Brotherray:


----------



## Acer2000 (Sep 17, 2006)

It seems Fred no longer wants to talk with me!:sigh:


----------



## jamiemac2005 (Jul 5, 2007)

haha, give him time, we're all in different timezones and we all have different social lives, i'm sure he'll post back... He wouldn't put this much work in not to post you back =]

Cheers,
Jamey


----------



## Acer2000 (Sep 17, 2006)

Jamey, you are gem. Thank you. I will wait for Fred. :wink:


----------



## Acer2000 (Sep 17, 2006)

Is there a place that sells javascripts? Any idea??


----------



## jamiemac2005 (Jul 5, 2007)

meh, i doubt that sells, you could find a 'request a script' board and put a request up there.... places like dynamicdrive.com have freely developed scripts on them.


----------



## Acer2000 (Sep 17, 2006)

Jamey, 

With Fred no longer interested to help me out, can you help me please??


----------



## Acer2000 (Sep 17, 2006)

No one to help me out on this forum?????????:4-dontkno

I am going nuts!!!!!:4-dontkno

Please help me. :sigh:


----------



## Acer2000 (Sep 17, 2006)

So many members using this board and nobody can help?

Are you alive??


----------



## FredT (Nov 16, 2007)

Sorry, I really haven't been around the forum lately... I just went back to school and I've been a little busy.

Ugh, last time I checked out the script it was working great... now I pulled it back up, checked to make sure that your code fixes were in place and gave it a run... it's still flickering away after _exactly one rotation through the pictures_ (which may be significant because there are places in the script that check to see if the rotation is finished then resets the stuff and the problem may lay there). At least the flickering doesn't appear to be random as it did before.

Here is the link to the new one (hosted by x10, by the way. jamiemac: saw you were looking for a free php mysql host and i always use x10 :wink

So, are there any other errors in my code that you can find? I'm really bummed because I was CERTAIN that code was working before!

Thanks


----------



## Acer2000 (Sep 17, 2006)

Dear Fred,

It is great to hear from you again. 

I saw the link, everthing looks great! Can you please put it for me on the file I once attached? 

I would greatly appreciate it. You have kindly offered to do this in one of your previous posts and I appreciate your help. I look forward to giving it a test on my server and see how it works. You did a great job. :wave:

Also you may wish to take a look at the script which was generated by Swich, I have no idea where to insert this code exactly!


----------



## FredT (Nov 16, 2007)

I just checked the site out on my Windows computer and I think the flickering only happens with Firefox on Mac... so at this point it really doesn't matter. What percentage of your viewers are going to be using Firefox Mac? And for that small percentage, the flickering is not a huge deal. Let's go with this one.

Before I go and upload the new .txt file, where on the page would you like that Switch file? I might as well add it in the .txt so everything is done at once.


----------



## Acer2000 (Sep 17, 2006)

Dear Fred,

On the area for the large picture, 552x 344 It is here that I would like the pictures to move. 

Do you have the text file which I once uploaded? 

Thank you for all your help


----------



## Acer2000 (Sep 17, 2006)

Dear all,

My intention in the first place was to create flash slideshows similar to the ones displayed on this website

http://flash.dvd-photo-slideshow.com/overview/sample.php


However, after I downloaded the software, I have no idea where to insert the code that was generated by the software. This is my real dilemma and I have no idea how get along without your help and patience. I mean it can be fun too?


----------



## FredT (Nov 16, 2007)

Hi Acer,

Sorry it took me so long to get back to you. Here is the final script put into the .txt document.

Now I will explain how to customize it. I have included comments in the code. You may want to change the code where my comments indicate. It is very easy to do. All my comments are surrounded by *'s to get your attention. For example, *********This is a comment***********

Ok. My first comment says "here is the text formatting". This code formats what you want the text to look like that appears over your images. I left additional comments to help you out, I think it is pretty self explanatory. If you want the text a little bigger you would change 


```
font-size: 30px; /* The font size */
```
to


```
font-size: 36px; /* The font size */
```


```
/* ********** HERE IS THE TEXT FORMATTING ********* */
#textChanger		{
			position:absolute; /* Leave this one alone */
			left:15px; /* How far it is from the left edge of the picture */
			top:300px; /*How far it is from the top edge of the picture */
			z-index:3; /* Leave this one alone */
			color: #FFFFFF; /* The font color */
			font-size: 30px; /* The font size */
			}
/* ********** END OF THE TEXT FORMATTING *********** */
```
Ok, the other areas you can change are in the script. I left a comment that says 

```
<!--************** HERE IS THE SCRIPT *******************-->
```
I left more comments inside the script to help you along.

Don't change anything after where it says


```
//***Permanent***\\
```
Let me know if you need help with anything.


----------

