Awesome

jQuery.BgSwitcher

Switch the background image with using effect.

Demo

http://rewish.github.io/jquery-bgswitcher/

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({left: $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

Running the Tests

Setup the modules required for testing.

git submodule update --init --recursive

You can testing in two ways:

Open the test/index.html in the Web browser
Command Line Testing with the PhantomJS

phantomjs lib/mocha-phantomjs/lib/mocha-phantomjs.coffee test/index.html