jQuery Background Switcher: Navigation

Another update for our Unobtrusive Background Image Switcher jQuery plugin: new option to show the navigation links so that the user can switch between the images manually.

This option is disabled by default, to use it just enable the “links” option, the rest is up to CSS:

<div id="bg-body"></div>

<script type="text/javascript">
// array with image paths 
var srcBgArray = [
  "/path/to/image1.jpg",
  "/path/to/image2.jpg",
  "/path/to/image3.jpg"
];

$(document).ready(function() {
  $('#bg-body').bcatBGSwitcher({
    urls: srcBgArray,
    alt: 'Alt text',
    links: true
  });
});
</script>

Since the images are not loaded at the time of the page load, they might have to be fetched after user clicks the link, in this case the loader animation has to be shown.

Loader element is created automatically if the links are enabled, the animation itself can be styled just as anything else, we included the default implementation in the demo.

Since we put few extra bytes to implement the new features, we now distribute the minified (with UglifyJS) version that is as light as 2.8 kb. If you want the source code – feel free to check out the Git repository.

Demo and downloads:

jQuery Unobtrusive Background Image Switcher

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:

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

MooTools Unobtrusive Background Image Switcher

MooTools Unobtrusive Background Image Switcher
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:

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