There are tons of slideshow options on the web today, many are very well built while others can be very cluttered and hard to use/understand. Now that I am getting fairly comfortable with jQuery I felt as if building a sideshow myself would be very beneficial as well as a good learning experience. I wanted to build this slideshow for someone who has little knowledge of html css and JavaScript. So what I did was make it so simple that all you have to do is link to jQuery, the slideshow js I created and add a single <div> in the html with an id of whatever you want. There is no need for any css, but of course adding css to spice it up is very very easy.
Steps to implement my slideshow:
1: Link to the JS
Sources:
2: Edit the variables in mariosSlide.js
var divName = "slideShowDiv"; // name of the div in html var numSlides = 10; // Number of slides in the slideshow var pauseTime = 6000; // Pause time between slides var imagesPath = "http://marioedgar.com/slideshow/mariosSlide/"; - URL to the directory all your images are located. All images must be names 1, 2, 3, 4... etc var imageType = ".jpg"; // Type of images var slideShowWidth = 1000; // width of slideshow var slideShowHeight = 532; // height of slideshow var loaderName = "loader.gif"; // name of loader gif (optional) var loaderWidth = 32; // width of loader var loaderHeight = 32; // height of loader var navigationButtons = true; // If you would like to enable navigation buttons
3: Add the html markup
4. Your done… Easy yeah?
Check out my example here (I made the images way large so you can see the image pre-loading in action): http://marioedgar.com/slideshow/
