Update 2013.04.26: we have published the jQuery version of this plugin, please see it if you prefer to use jQuery.
There are plenty of image slider and gallery scripts out there, but recently we had a pretty specific goal – to switch backgrounds of a website, and couldn’t find a good MooTools solution to accomplish it, so we had to create our own MooTools Class.
Here are the basic requirements:
- Only the first one has to be loaded, the rest must “wait for their turn” and load as needed. After all the images are loaded they just switch. That’s the unobtrusive part so that we can use a lot of heavy background images without having to worry about load times.
- The image has to be preloaded and only shown after the load is completed.
- It has to support responsive full screen background feature without breaking the image’s proportions on any screen/window size.
- As with all the scripts it has to be lightweight and play well with other front end features.
So here it is:
- Demo fixed size
- Demo full screen
- Download the latest version of the package with example pictures and working demos
- Visit GitHub repository
Images used in this demo are copyrighted and only intended for this demo.
Further information, usage and options:
It is pretty easy to use this script, just include bcat-bgswitcher.js as well as MooTools framework and initiate it like this:
- wrapperId – string id of the wrapper element to put images into, defaults to ‘bg-body’
- startIndex – integer array element to start with, defaults to 0
- timeout – integer timeout in milliseconds, defaults to 12000
- alt – string text to fill the alt attribute of each image, defaults to ‘Picture’,
- fullscreen – boolean telling if the images are stretched full screen – will remove the width and height attributes, the rest is done by CSS, defaults to false
The class works with MooTools 1.3 and 1.4 including the latest version at the time. It uses Asset.image from MooTools More to preload images but we load generic MooTools More package in the demo.
Browser support: IE8+ and other browsers that are not too old.
If you like this script please place a link to this post or our website, it’s not a requirement, just something that would make us a little happier 🙂