- Overview
- Documents
Wallpaper is a jQuery plugin for smooth-scaling image and video backgrounds.
Source: formstone.it
1. INCLUDE JS AND CSS FILES
<script src="jquery.js"></script> <script src="jquery.fs.wallpaper.js"></script> <link href="jquery.fs.wallpaper.css" rel="stylesheet">
2. HTML
<div id="element"></div>
3. JAVASCRIPT
$("#element").wallpaper({
source: "path/to/image.jpg"
});
4. OPTIONS
Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set custom options for a specific instance by attaching a data-boxer-options attribute containing a properly formatted JSON object to the target element.
| NAME | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| autoPlay | boolean | true | Autoplay video |
| embedRatio | number | 1.777777 | Video / embed ratio (16/9) |
| hoverPlay | boolean | false | Play video on hover |
| loop | boolean | true | Loop video |
| mute | boolean | true | Mute video |
| onLoad | function | $.noop | On load callback |
| onReady | function | $.noop | On ready callback |
| source | string | object | null | Source image (string or object) or video (object) or YouTube (object) |
4. METHODS
Methods are publicly available to all active instances, unless otherwise stated.
defaults
Sets default plugin options
$.wallpaper("defaults", opts);
| PARAMETER | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| opts | object | {} | Options object |
destroy
Removes instance of plugin
$(".target").wallpaper("destroy");
load
Loads source media
$(".target").wallpaper("load", "path/to/image.jpg");
| PARAMETER | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
| source | string | object | Source image (string) or video (object) or YouTube (object); { source: { poster: <"">, video: <"" or {}> } } |
pause
Pauses target video
$(".target").wallpaper("stop");
play
Plays target video
$(".target").wallpaper("play");
unload
Unloads current media
$(".target").wallpaper("unload");
6. EVENTS
Events are triggered on the target instance's element, unless otherwise stated.
| OPTION | DESCRIPTION |
|---|---|
| wallpaper.loaded | Source media loaded |
JS Tutorial
