Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rewish/jquery-bgswitcher
Switch the background-image with using effect.
https://github.com/rewish/jquery-bgswitcher
Last synced: 2 months ago
JSON representation
Switch the background-image with using effect.
- Host: GitHub
- URL: https://github.com/rewish/jquery-bgswitcher
- Owner: rewish
- License: mit
- Created: 2010-09-20T13:43:46.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2019-10-31T03:23:45.000Z (about 5 years ago)
- Last Synced: 2024-08-02T12:23:03.084Z (5 months ago)
- Language: JavaScript
- Homepage: http://rewish.github.io/jquery-bgswitcher/
- Size: 1000 KB
- Stars: 194
- Watchers: 15
- Forks: 76
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-web-effect - bgswitcher - Switch the background-image with using effect. (🚀 A series of exquisite and compact web page cool effects / Image Effect)
- fucking-awesome-web-effect - bgswitcher - Switch the background-image with using effect. (🚀 A series of exquisite and compact web page cool effects / Image Effect)
README
jQuery.BgSwitcher [](https://travis-ci.org/rewish/jquery-bgswitcher)
=========================
Switch the background image with using effect.
Demo
-------------------------
http://rewish.github.io/jquery-bgswitcher/
Usage
-------------------------
```html
Lorem ipsum dolor sit amet.
```
```js
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
... Something Config ...
});
```
For example, if you want to disable the loop of switching:
```js
$(".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](#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](#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()`.
```js
$.BgSwitcher.defineEffect("extraSlide", function($el) {
$el.animate({left: $el.width()}, this.config.duration, this.config.easing);
});
```
Then, specify the effect name that you added.
```js
$(".box").bgswitcher({
images: ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
effect: "extraSlide"
});
```
Calling the Methods
-------------------------
Support the method calls like jQuery UI Widget.
```js
$(".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:
```js
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.
```sh
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
```sh
phantomjs lib/mocha-phantomjs/lib/mocha-phantomjs.coffee test/index.html
```
License
-------------------------
The [MIT License](https://github.com/rewish/jquery-bgswitcher/blob/master/LICENSE.md), Copyright (c) 2009-2014 [@rewish](https://github.com/rewish).