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