Since our MooTools class worked well on many projects we went ahead and rewritten it for jQuery (after all it’s a jQuery world out there).

The idea as well as functionality remains pretty much the same: we need to use as many (probably background) images as we want no matter how heavy they are, while minimizing their influence on load times.

Here are the basic requirements:

• Only the first image has to be loaded, the rest must “wait for their turn” and load as needed.
• The image has to be preloaded and only shown after the load is completed. We now use fade effect for every image including the first one.
• Support for responsive full screen background feature without breaking the image’s proportions on any screen/window size.
• It has to be lightweight and play well with other front end features.

So here is the jQuery version:

• Demo fixed size
• Demo full screen
• Demo with navigation links
• Download the latest version of the package with example pictures and working demos
• Download a specific version of the package
• Visit GitHub repository

No need to pass the full screen option any more, for jQuery version of this plugin it is handled entirely by the CSS – again if you want the full screen feature to work, download the whole package and take a look at 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 →