Image Slider Demo

This is our First Snazzy Image Advert

A Second Image Slider

This is our First Snazzy Image Advert

I'm a big Half-Life fan and as a result often visit www.steampowered.com. They have a nice alternating image slider at the top with all the latest releases or big name games. I have tried to emulate it here using unobtrusive javascript to enhance a definition list (dl tag) which contains an image link in the definition term (dt tag) and the text I want to appear when users hover over the buttons/images (captions in other words) in the dd tag.

To use the image slider construct your definition list (view source for an example), download the Image Slider files and put them in a subdirectory of your website. Then in your page create a style link to the css file and a script link to the js file (again check the source here for an example). Wrap you dl in a div and use the class of the div to enable the slider. The least you need is "imageslider" in the class. Other options are sliderdelay_num, usefadein_yes/no and fadeinspeed_num where num is a number of milliseconds and yes/no is yes or no. View the source of this page to see all properties set. This is a first attempt and I may have cut some corners on best practices (I grabbed the fade in from elsewhere so it might not be optimal) so any suggestions/feedback leave a comment in the blog post.

The rar contains all the files you should need. You can alter the css how you see fit. You can also ignore the test images and use your own of course. It doesn't matter where your images are as long as they are correctly placed in your definition list.

Update: Accessibility issues - The script for this widget kicks in on page load and unfortunately this means you can see all the images loading before they are made invisible. I have decided it's best to start with all images except the first one as invisible. Along with this I have added a series of buttons identical to those the Image Slider creates. These buttons will be visible if the user has script turned off and you can use these links to switch images. This is all optional if you think you will need a fallback for browsers with javascript disabled. You can leave out these buttons if you wish. If you leave it in make sure to use the same id I have used here (see source).