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

Full screen functionality uses both JavaScript and CSS so if you want the full screen option to work, download the whole package and see our bare bones style.css. The CSS part is based on Perfect Full Page Background Image / CSS-Only Technique #2 from css-tricks.

Images used in this demo are copyrighted and only intended for this demo.

Further information, usage and options: Continue reading →