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

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:

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

License

The MIT License, Copyright (c) 2009-2014 @rewish.