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:
To use the plugin include jquery.bcat.bgswitcher.js as well as jQuery framework and initiate it like this:
Use any element as the container for the images and call the plugin from this element (div with id “bg-body” in this example). Everything including the array with image urls is passed as an options object, obviously you have to pass at least the urls array, the rest is optional:
- urls – array with image paths, should it only contain one item the script will run as an image preloader, further functionality would not be initiated. Defaults to an empty array, has to be passed
- startIndex – integer array element (index) 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’,
- speed – integer animation speed in milliseconds, defaults to 1000
- links – boolean if the navigation links have to be shown, defaults to false
This plugin was written for jQuery 1.9 but it works with jQuery 1.2+ (wasn’t tested with earlier versions, might also work). Plugin structure is based on jQuery Boilerplate.
Browser support: IE8+ and other browsers that are not too old.
Again feel free to leave comments, send feedback messages and share this page, your reaction really motivates us.
Updated to v. 1.1: added support for multiple instances per page.
Updated to v. 1.2: added a new option to switch the images manually (navigation).
Updated to v. 1.3.2: added prevnext (previous / next links) option. In following bugfix releases fixed few bugs related to using prevnext and links options simultaneously. All generated elements moved into the element plugin is called from (as children and not as siblings any more).
At the moment the new version can be downloaded from GitHub, a new post with further details and update of the demo will be available a little bit later.