tnd1000 7 Posted May 11, 2012 Report Share Posted May 11, 2012 (edited) 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 May 11, 2012 by tnd1000 Quote Link to post Share on other sites
Don E 125 Posted May 13, 2012 Report Share Posted May 13, 2012 (edited) 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 May 13, 2012 by Don E 2 Quote Link to post Share on other sites
tnd1000 7 Posted May 14, 2012 Author Report Share Posted May 14, 2012 (edited) 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. -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 May 14, 2012 by tnd1000 Quote Link to post Share on other sites
Don E 125 Posted May 14, 2012 Report Share Posted May 14, 2012 You're welcome! Glad you find it useful. Quote Link to post Share on other sites
trauden321 1 Posted May 26, 2012 Report Share Posted May 26, 2012 Thanks that's great 1 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.