Update: jQuery Background Image Switcher

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:

6 thoughts on “Update: jQuery Background Image Switcher

  1. Thanks for this plugin!! Is it possible to update the background array?

    I call this to initialize the background every minute and when it runs the 2nd time, srcContentImgArray does not update with the new set of images.

    $(‘#content-slider’).bcatBGSwitcher({
    urls: srcContentImgArray,
    alt: ‘Alt text’
    });

    Thanks for your time and help!

    • Hi Julian, thanks for the feedback. I’ve looked into your question, in the latest version it would be a problem, sorry 🙂

      You can access plugin related data this way
      $(‘‘#content-slider’’).data(‘plugin_bcatBGSwitcher’)
      but the instance variables are kinda isolated and not meant to be changed dynamically.

      If you don’t need multiple instances on the same page though, you can grab the first version of the plugin
      https://github.com/bcat-eu/jquery-bgswitcher/blob/47fca5d09805c2285cbc7e30cd0fa1a53f81ff9b/Source/js/jquery.bcat.bgswitcher.js

      there you can change options dynamically:
      $(‘‘#content-slider’’).data(‘plugin_bcatBGSwitcher’).options.urls = someArray;
      after updating the array make sure you also remove all the images that were already loaded from your container for the new ones to load

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.