TL;DR Introducing jSimpleFader, a jQuery plugin to simply fade between images.
UPDATE You can now visit the jSimpleFader Github Page for a live demo, since I know you’re lazy.
UPDATE Added a new option: animationStyle. Right now, the values are fade or crossfade.
UPDATE Added a new option: links. Set this to an array of hyperlinks you want to wrap around your images.
It’s something I’d done a hundred times before. You have a folder of images, numbered in sequence, that you want to fade and rotate through on your webpage. It’s a simple rotator (although, strictly speaking, nothing rotates) that I’ve copy and pasted from project to project with tweaks here and there. So when our designer asked if I knew of any good jQuery plugins that did that, I decided I should just make one myself. Introducing: jSimpleFader.
jSimpleFader is a jQuery plugin to simply fade between images. All it really needs is the total number of images you have, and it rotates through them. The code is straightforward. Just call $('#fader1').simplefader( 10 ); That’s it.
The plugin tries to do a lot of figuring out for you. Your images don’t need any particular naming convention; they just need a number in them. You don’t even need any particular HTML structure; there just needs to be an <img> somewhere. The script has a simple limitation: your images should start numbering at 1, although the first image doesn’t have to be the one on your webpage.
After the number of images, you can pass in an object of options. Here are the options you can set:
- speed – the speed of rotation in ms (default: 5000)
- animationSpeed – the speed of fading animation in ms (default: 600)
- animationStyle – the style of animation: fade, crossfade (default: fade)
- links – an array of hyperlinks
Like all jQuery plugins, you can have multiple faders on one page, with their own options, and everything should work fine.
Check out the project on Github, and feel free to participate.