CODEWITHSUNDEEP
javascripthtmlimageslideshow
StarLordBlair
StarLordBlair

Reputation: 583

Javascript Image slide show loop

I have the code for the slideshow. However what I'm wanting to do is on load an input box for a user to input the name of a folder then the page to locate that folder and show each image from that folder. I've managed to do this by having two different pages, one with an input box then the other showing the images.

However I'd rather not hard code the image source as I want the webpage to run on a server but different slide shows might be run in different places in the company. From the research I've done I think I need a for loop, to loop round each picture in the folder but not 100% sure. This is what I've got so far:

I've passed in the folder name from the previous page. But as you can see the image paths are still hard coded in. I would like a for loop to loop through each picture and show them all on the webpage, no matter where they are/how many there are as long as they inputted the correct folder/Slideshow name. As the image folder will all be in the same place on the network path.

   <!DOCTYPE html>
<html>

<head>
<script type="text/javascript">
var first = getUrlVars()["SlideShowTest"];

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
//alert(first)
//-->
</script>


</head>
<body>


<script type="text/javascript">
<!--
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
</script>

</body>
</html>

Upvotes: 3

Views: 3113

Answers (1)

Adder
Adder

Reputation: 5878

Looks like it might work.

Regarding style, you could put the Images into an array to get rid of the eval:

var images= [];
var image;
image= new Image();
image.src= '...';
images.push(image);

for(var i=0; i<images.length; ++i) { 
   image= images[i];
   ...
}

It also is better to use setInterval("slideit()",2500); once instead of setTimeout.

Upvotes: 1

Related Questions