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: