Flexible & Responsive jQuery Background Image Plugin - Wallpaper
File Size: | 22.6 KB |
---|---|
Views Total: | 6337 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Wallpaper is a tiny jQuery plugin that has the ability to scale a background image to fill and fit a div container while resizing the browser. Good for responsive web & app designs that automatically resize the background images without quality loss.
Features:
- Responsive and flexible
- Supports fixed position background image
- Scales the images with smooth transitions
- Allows to set the options using
data-*
attributes - Supports callback events and methods
- Supports all the modern browsers
- Easy and fast
Basic Usage:
1. Inlcude jQuery javascript library and jQuery Wallpaper plugin in the footer of your web page
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.bp.wallpaper.js"></script>
2. Include required jquery.bp.wallpaper.css stylesheet on the web page
<link href="jquery.bp.wallpaper.css" rel="stylesheet" type="text/css" media="all" />
3. Create the html. Using Html 5 data-*
attributes to set the configurations. You can also set them in javascript
<div data-wallpaper-options='{"source":"nasa-bw-3.jpg","fixed":"true"}'> </div>
4. Opitons
autoPlay: true, // Autoplay video hoverPlay: false, // Play video on hover loop: true, // Loop video mute: true, // Mute video onLoad: function() {}, // Function fired when image has loaded onReady: function() {}, // Function fired when pluggin is ready source: "", // Source image file speed: 500 // Speed of image transition
Change logs:
v3.1.19 (2015-02-07)
- Adding an alt tag to the fallback image
v3.1.18 (2014-06-17)
- Fixing debounce issue with responding;
v3.1.17 (2014-06-01)
- Fixing bug with destroy method;
v3.1.16 (2014-05-24)
- Normalizing youtube loading;
v3.1.15 (2014-05-22)
- Normalizing youtube loading;
v3.1.14 (2014-05-21)
- Fixing issue with image transitions
v3.1.13 (2014-05-20)
- Fixing more Safari issues...
v3.1.12 (2014-05-15)
- Fixed issue with responsive images never being cleaned;
v3.1.11 (2014-04-22)
- Fixing safari issue - problem with 'pointer-events' property.
v3.1.10 (2014-04-18)
- Bugs fixed
v3.1.5 (2014-04-17)
- Fixing youtube regex bug;
v3.1.3 (2014-04-10)
- Adding responsive image background support!
v3.1.2 (2014-04-08)
- Fixing YouTube thumbnail issue;
v3.1.1 (2014-04-03)
- Media load first no longer fades;
v3.1.0 (2014-03-30)
- Fixing issues with timing and animation styles;
v3.0.10 (2014-03-27)
- Fixing issues with timing and animation styles;
v3.0.6 (2014-03-27)
- Adding mute option for videos
v3.0.6 (2014-03-21)
- Adding data check to destroy method;
v3.0.5 (2014-02-18)
- Fixing demo formatting;
- Modifying video support on mobile - now draws supplied poster;
v3.0.4 (2014-02-07)
- Fixing data checks;
v2.2.4 (2014-01-03)
- Removed 'fixed' option;
v2.1.3 (2013-12-23)
- Added html5 video support - Wallpaper with moving images!
v2.1.2 (2013-11-15)
- Adding loading class to target for styling control.
v2.1.1 (2013-11-6)
- Adding event if trying to load same image;
v2.0.3 (2013-10-15)
- Fixing Bower support.
v2.0.2 (2013-10-12)
- Fixing issue with naturalHeight / width; Name spacing events; Adding fade up on initial load;
This awesome jQuery plugin is developed by Formstone. For more Advanced Usages, please check the demo page or visit the official website.