jQuery slide show

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:

jQuery
preloader
mariosSlide.js

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/

© 2010 M2Volt all rights reseved

back to top