Tag Archives: JavaScript

jQuery Background Switcher: Navigation

Posted on by
Reply

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:

Update: jQuery Background Image Switcher

Posted on by
6

Updated our Unobtrusive Background Image Switcher jQuery plugin: added support for multiple instances per page. This means it can be called from multiple elements on the same page like that:

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

<script type="text/javascript">
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'
  });
});
</script>

/* some other stuff here */

<div id="content-slider"></div>

<script type="text/javascript">
var srcContentImgArray = [
  "/path/to/content-image1.jpg",
  "/path/to/content-image2.jpg",
  "/path/to/content-image3.jpg"
];

$(document).ready(function() {
  $('#content-slider').bcatBGSwitcher({
    urls: srcContentImgArray,
    alt: 'Alt text'
  });
});
</script>

Not really useful for background images, but if you have a background image switcher as well as a content image slider and wouldn’t want to load too much scripts this might just be your thing, was also our reason for this update.

Demo and download links remain the same:

jQuery Unobtrusive Background Image Switcher

Posted on by
31

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

Posted on by
13

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 →