Simple jQuery plugin to rotate background images
Recently I came across a situation where I wanted to be able to rotate the background images on a web-page in sequence, with a delay between each iteration.
Whilst there are plenty of jQuery Carousels available, these usually involve generating some HTML first (such as a list of images) and then 'progressively enhancing' this into a carousel. I didn't want this, as the images I wanted to rotate didn't exist with the current DOM. I also found that existing carousel plugins tended to be packed with lots of functionality that I didn't need. So, I thought, this looks like an ideal opportunity to try and write my first real jQuery plugin - nice and simple, too.
The jQuery Solution
For my plug-in to work I needed it to take a few parameters:
- A list of image filenames
- A delay period between each transition
- The DOM element for it to work on
I also decided it would be a good idea to be able to pass in a base directory for where the images lived (rather than having to pass in the full path). It also seemed like a good idea to be able to pre-cache the next image to be loaded so that it would be ready to be displayed on the next rotation. I also decided there was no need for any fancy transitions or effects, since these aren't that simple to add when dealing with background images and would only complicate what is supposed to be some very simple code.
After a quick re-cap on how to write a basic plugin I ended up with the following code (which you can download or view a demo of below):
Code
(function($)
{
$.fn.extend({
bgrotate: function(options)
{
var defaults = {
delay: 1000,
images: [],
imagedir: "/images/"
}
var o = $.extend(defaults, options);
var $obj = $(this);
var cache = [];
var i = 0;
var preCache = true;
return this.each(function()
{
setInterval(function() { setBack($obj, o.images, o.imagedir) }, o.delay);
});
function setBack(elem, backgrounds, imagedir)
{
elem.css("background-image", "url(" + imagedir + backgrounds[i] + ")");
i++;
if (i == backgrounds.length)
{
i = 0;
preCache = false;
}
if (preCache)
{
var cacheImage = document.createElement('img');
cacheImage.src = imagedir + backgrounds[i];
cache.push(cacheImage);
}
}
}
});
})(jQuery);
The plug-in then can be called simply like in this example below (where we are rotating a sequence of images on the page's BODY element with a delay of 4 seconds between each image):
$("body").bgrotate({ delay: 4000, imagedir: "/images/backgrounds/", images: ["249.jpg", "335.jpg", "419.gif", "87.jpg", "96830.png"] });
I will be the first to admit I am still new to writing jQuery, so please take this code at face value and don't expect it to be an example of best practice. It works for me and if you want to use it, feel free!
The basis of the code is that it loops through all the images in an array and sets the background image style on the calling element to that of the image. It then uses the native javascript function setInterval to create a delay before the next iteration. The only noteable feature is that the next image in the sequence is pre-loaded by creating an IMG DOM element that forces the browser to load it. This is only done the first time the image is displayed.
If you have any suggestions on how to improve it or make it or more efficient, then please feel free to add a comment. I can't, though, promise to offer any help or support for this - take it as it is, please :)
Download and Demo
You can view a simple demonstration of the plug-in in action here.
You can download the javascript directly here or grab the source code from GitHub via the link below.
6 Comments
Chris
Thanks for this great plugin. I was wondering if there was a way to add a transition effect for each image. Like a fade, or slide in and out. Thanks again,
Chris
Dan Diplo
Hi Chris,
Thanks for the compliment. My plug-in was meant to be really simple, so I've no plans at the moment to add transition effects etc. If that's what you want I'd recommend checking out jQuery Cycle or jCarousel Lite, both of which are excellent.
Daniel
I find your script to be wonderful, thank you so much for sharing this gem. Would it be difficult to make these background images scale 100% with browser dimensions rather than tiling? If so, any hints on how to make that happen? Thanks again!
computer pictures
Great plugin. Thank you for sharing!
Kazaf
Great work! Its simple and it works right as I need. thnx
Savannah
Hi,
I know that the creator of this plugin does not give additional support, however I think this a great plugin and I would like to use it but I need some help as I haven't worked with js much before. I have followed all of the steps but i don't know how to get it showing on the front end.
Can anyone that has used this plugin offer any advice/help. It would be much appreciated.
Thanks in advance. Savannah
Leave a Comment
Just fill in the form and click Submit. But note all comments are moderated, so spare the viagra spam!
Tip: You can use Markdown syntax within comments.