tnd1000 Posted May 11, 2012 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 Link to comment Share on other sites More sharing options...
Don E Posted May 13, 2012 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 Link to comment Share on other sites More sharing options...
tnd1000 Posted May 14, 2012 Author 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 Link to comment Share on other sites More sharing options...
Don E Posted May 14, 2012 Share Posted May 14, 2012 You're welcome! Glad you find it useful. Link to comment Share on other sites More sharing options...
trauden321 Posted May 26, 2012 Share Posted May 26, 2012 Thanks that's great 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now