# Image in folder and Javascript?



## techmaster85 (Sep 5, 2011)

How do I go about getting the script to show an image that is inside a folder that is on the root? For instance I have a folder named pictures and a picture named B737.jpg. How do I tell the script to get the picture that is in the folder ../Pictures/B737.jpg?


----------



## techmaster85 (Sep 5, 2011)

No one knows how to do this? I would think it can't be that difficult.


----------



## Ent (Apr 11, 2009)

I'm not really very proficient in Javascript, but my understanding is that you should be able to include the path with the file name of the image. Both are, after all, merely text. Alternatively you could create an imagePath variable at the start which holds the text "../Pictures/". You could then change what is presently your 6th line to

image1.src=imagePath + "B737.jpg"

I'm a little bit worried about how you've told the slide function to pick the next image. A better alternative would be to make an array of image paths, and set the src value to the next entry of the array. 
http://www.w3schools.com/js/js_obj_array.asp


----------



## techmaster85 (Sep 5, 2011)

I didn't write the script myself, I just modified it for my needs. I'm not a programmer, so working with this stuff is very difficult for me.

Where would I add the file path to the name of the image? I added line six to read

image1.src="../Pictures + B737.jpg"

but that did not show the picture


----------



## Ent (Apr 11, 2009)

In that case, I'll have a go at rewriting the script for you. I reckon I could do with a bit of JavaScript practice after all.

It'll have to wait until this afternoon though; I've got to go to school now.


----------



## Ent (Apr 11, 2009)

This should do what you're after.


```
<html>
<head>
<script type="text/javascript">
<!--
var path="../Pictures/" ; // The folder in which the pictures are located
var myImages=new Array("B737.jpg","G5.jpg","Corsair.jpg");  // A list of the pictures to show

var PreLoadImage=new Image();
for (i=0;i<=myImages.length - 1; i++)
{
PreLoadImage.src=path+myImages[i]; // Loads a copy of each image at the start, to ensure it's cached and displays promptly when needed.
}
//-->
</script>
</head>
<body>
<img src="B737.jpg" name="slide" width="50%" height="50%" />
<script>
<!--
//variable that will increment through the images
var imageIndex=0 ; // Identifies which image to show
function slideit(){ // Function to change the picture to the next one
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=path+myImages[imageIndex]; // Change the picture

if (imageIndex<myImages.length-1) // Decide which picture comes next
imageIndex++;
else
imageIndex=0;
//call function "slideit()" every 4.0 seconds
setTimeout("slideit()",4000);
}
slideit();
//-->
</script>
</body>
</html>
```


----------



## techmaster85 (Sep 5, 2011)

I appreciate the work. How do I tell it from where to grab the images? In fact, can you walk me through all the important parts of this script here, I'm a total newbie to Javascript coding


----------



## Ent (Apr 11, 2009)

To change the folder from which you get the pictures, change the line 
var path="../Pictures/" ;

To change the list of pictures it uses, change the line 
var myImages=new Array("B737.jpg","G5.jpg","Corsair.jpg");
For example to add a picture named "mini.jpg"
var myImages=new Array("B737.jpg","G5.jpg","Corsair.jpg","mini.jpg");

To change the time between picture changes, change the line 
setTimeout("slideit()",4000);
For example if you want it to change every 2 seconds
setTimeout("slideit()",2000);

If you have any other questions, let me know.


----------



## techmaster85 (Sep 5, 2011)

I have the B737 and others in a folder named Pictures, but they are not appearing on my webpage. Also, do I need to type in every single picture I am going to use, or is there a way I can have them come up randomly from all different folders?

Basically I have five folders of pictures, and I would like this script to pick pictures out of each folder at random and display on the screen, any easy way to do this?


----------



## Ent (Apr 11, 2009)

err... Yes, no, maybe. 

It would be far beyond my javascript abilities, and probably beyond the innate abilities of javascript itself, to read the names of the files and folders in your computer. This is especially true if this page is hosted on a server. 

If there were some sort of pattern to the file and folder names, then you might have some more luck. For example if the folders were named "Pic1", "Pic2", and so on until "Pic5" then javascript could be programmed to pick such a name. Likewise for the images themselves.

Incidentally, where is your "pictures" folder currently located in relation to the web page you're loading? That may explain why you aren't getting the pictures shown.


----------



## techmaster85 (Sep 5, 2011)

I have my file Planes.html on a server. On that same server "level" if you will I have a folder named Pictures. Inside the Pictures folder I have the B737, Corsair, etc. I always thought the way to show that was ../Picutres/B737.jpg or just ../Pictures/ for all pictures in the folder. The ../ means it needs to go up one level to where the folder can access it.

Hope that makes sense


----------



## Ent (Apr 11, 2009)

By "the same level", do you mean that the pictures folder is in the same folder as the html, or that the folder the HTML is in is in the same folder as the Pictures folder.

i.e. if the html is stored in
/website/Slideshow/html.htm
Is the pictures folder
/website/Slideshow/Pictures
or 
/website/Pictures
?


In the former case you need /Pictures/B737.jpg
In the latter case you need ../Pictures/B737.jpg


----------



## techmaster85 (Sep 5, 2011)

The html file is stored in /website/html.html
The pictures are stored in /website/Pictures/picture


----------



## Ent (Apr 11, 2009)

In that case you don't need the ../
The default is to start in the directory in which your HTML file is found, in your case website. That would move you into the *parent *directory, being the one that holds Website.


----------



## techmaster85 (Sep 5, 2011)

so I would need /Pictures/ as the file path for the images?


----------



## Ent (Apr 11, 2009)

Almost. Simply using Pictures/ should do it.


----------



## techmaster85 (Sep 5, 2011)

That seems to have done it. Thank you so much, still no idea how to generate a random selection of pictures from various folders?


----------



## Ent (Apr 11, 2009)

Using Javascript alone, it is impossible to read the file system of the server.
You basically have 3 options:

Write the names of all the files and folders containing pictures into the script by hand, similar to how the script we have already is working.

Rename files and folders before upload so that they all follow a predictable pattern, (such as folder1 and pic1.jpg) which the script can then be told to use. 

Use a PHP based server side script to investigate the folders and files, and pass the names back to the javascript running on the user's computer. 

The earlier an option is, the easier it is to set up, but the more likely to be a pain to maintain later. A well written PHP script shouldn't need much changing if you decide to add more pictures or even another folder.


----------



## techmaster85 (Sep 5, 2011)

I think the PHP script will do what I want, but I know nothing about PHP coding at all.


----------



## Ent (Apr 11, 2009)

I'm afraid that I'm more or less in the same boat there. I can patch together a bit of PHP, but only as fast as I google the commands and I honestly wouldn't trust my own work in that language for use on a server. 

I suggest that you start a new thread for the new question, since competent PHP coders might not look at a thread with Javascript in the title.


----------

