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:
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
Very good job!
It’s possible integrate prev and next button?
Thanks a lot
thanks Pasquale,
that would not be a big change, but there is no such option at the moment, sorry.
You can use “links: true” to show a marker for each image though (see http://www.bcat.eu/blog/jquery-background-switcher-navigation/ ), prev / next option might come out with a later version
Yuriy
Thanks for the reply.
If time permits me I try to integrate the function and then paste here …
Thank you.
See the generateLinks Method here
https://github.com/bcat-eu/jquery-bgswitcher/blob/master/Source/js/jquery.bcat.bgswitcher.js
You may create a similar method that creates two elements with similar click events based on instance.currentIndex and call it from init based on a new plugin option.
Have a good weekend, Pasquale, regards from Germany!