Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
jQuery.BgSwitcher
Switch the background image with using effect.
jQuery.BgSwitcher is a jQuery plugin to switch the background image with effects. Here are effect types that can be used: fade,blind,clip,slide,drop,hide (No effect)
Usage
<div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
... Something Config ...
});
For example, if you want to disable the loop of switching:
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
loop: false
});
Configs
| Key | Type | Default | Description |
|---|---|---|---|
| images | array | [] | Background images |
| interval | number | 5000 | Interval of switching |
| start | boolean | true | Start the switch on after initialization (Calling the Methods) |
| loop | boolean | true | Loop the switch |
| shuffle | boolean | false | Shuffle the image order |
| effect | string | fade | Effect type (Built-In effect types) |
| duration | number | 1000 | Effect duration |
| easing | string | swing | Effect easing |
Effect Types
Built-In effect types
- fade
- blind
- clip
- slide
- drop
- hide (No effect)
Adding the effect type
First, define effect with using the $.BgSwitcher.defineEffect().
$.BgSwitcher.defineEffect("extraSlide", function($el) {
$el.animate({right: -$el.width()}, this.config.duration, this.config.easing);
});
Then, specify the effect name that you added.
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
effect: "extraSlide"
});
Calling the Methods
Support the method calls like jQuery UI Widget.
$(".box").bgswitcher("method name");
You can call various methods, For example:
| Name | Description |
|---|---|
| start | Start the switching |
| stop | Stop the switching |
| toggle | Toggle between start/stop |
| reset | Return to the first switching |
| select | Select the switching at index |
| next | Go to the next switching |
| prev | Go to the previous switching |
| destroy | !!Destroy BgSwitcher!! |
Example for select with button:
var $el = $(".box").bgswitcher({
images: ["foo.jpg", "bar.jpg", "baz.jpg"]
});
$("button").on("click", function() {
$el.bgswitcher("select", 1); // bar.jpg
});
Dependencies
Requires jQuery 1.7.x or higher.
Support browsers
- IE7+
- and modern browsers
- Mobile Safari
JS Tutorial
