Flexible & Responsive jQuery Background Image Plugin - Wallpaper

Flexible & Responsive jQuery Background Image Plugin - Wallpaper
File Size: 22.6 KB
Views Total: 6194
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.