Jump to content
tnd1000

Building a slideshow

Recommended Posts

Hey there! I'm looking to build a slideshow for my site, and I was wondering what would be the best way to go about it. All I really need are the basic buttons (start, stop, forward, backward) and the capability to cycle through a LOT of pictures. Any advice would be greatly appreciated!

Edited by tnd1000

Share this post


Link to post
Share on other sites

Hey, one way would be to use JavaScript. To get an idea of how that would look, check out the following:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Slide Show</title><style type="text/css">body {text-align: center;margin: 0;padding: 0;} #imageContainer {min-height: 550px;background-color: lightblue; } a  {text-decoration: none;padding: 5px;color: #333;}</style> <script type="text/javascript"> var imgSlide;var pic = 0;window.onload = function (){ imgSlide = document.getElementById('img'); // preload imagesimages = new Array();images[0] = new Image();images[0].src = "waterfall-0.jpg";images[1] = new Image();images[1].src = "waterfall-1.jpg";images[2] = new Image();images[2].src = "waterfall-2.jpg";images[3] = new Image();images[3].src = "waterfall-3.png"; } function slide(){imgSlide.src = images[pic].src;if(pic < 3) // images.length - 1 can be used here{pic++;}else{pic = 0 }timer = setTimeout(slide, 5000);} function prev(){if(timer)stopSlide(); if(pic == 0){ pic = 3; imgSlide.src = images[pic].src;}else{pic--;imgSlide.src = images[pic].src;}} function next(){if(timer)stopSlide(); if(pic == 3){ pic = 0;imgSlide.src = images[pic].src;}else{pic++;imgSlide.src = images[pic].src;}  } function stopSlide(){clearTimeout(timer);}  </script></head> <body><div id="imageContainer"><img id="img" src="waterfall-0.jpg" alt="image" title="image"/></div><a href="JavaScript:slide()" title="Start">Start</a><a href="JavaScript:next()" title="Next">Next</a><a href="JavaScript:prev()" title="Previous">Previous</a><a href="JavaScript:stopSlide()" title="Stop">Stop</a> </body></html>

To try it out, just replace the images with your own images. You can use <input type="button" /> or <button type="button"></button> for the controls, but in this case I just used links.

Edited by Don E
  • Like 2

Share this post


Link to post
Share on other sites

Man, you are awesome. I didn't expect you to actually build the thing, but thank you very much! I'll give it a try. :D -EDIT- It works great, and it's actually just what my client was looking for! I'll do a bit of tweaking and integration, and it'll be perfect. Can't quite thank you enough for your help.

Edited by tnd1000

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×