Imagecover.js

Imagecover is a jQuery plugin that allows an image to cover all its container.

####Author: Andrea Dell'Orco - Adostudio ####License: Mit License

---

##Demo & Usage:

• Regular Usage: (http://dev.adostudio.it/jquery/imagecover/demo.html)
• Background Fullscreen: (http://dev.adostudio.it/jquery/imagecover/demo-background.html)
• Background Fullscreen (with preloader): (http://dev.adostudio.it/jquery/imagecover/demo-background-loading.html)

---

Install

• Include (Required) imagesloaded.pkgd.min.js - Imagesloaded Plugin
• Include (Required) jquery.imagecover.js
• Include (Raccomanded) modernizr.js - Modernizr

Modernizr enables the browser to use CSS3 features (if they are supported).

Of course remember to include jquery... imagecover.js is a jQuery plugin.

Usage

Javascript:

$('.containerClass').imagecover();

HTML Markup:

<div class="containerClass">
  <img src="img/monkey.jpg">
</div>

The target image used to cover is the first direct child of the container selector.

Options

$('.containerClass').imagecover({
	runOnce	: false,
	throttle: 200 , 
	css2	: false,
	preloadAllImages:false,
	loadingClass: 'ic-loading',
	addPreload: false
});

• addPreload false / true / css-class : If it is specified a css-class (don't use . [dot] ), will be append an element preloader with this class to the containers while images are loading. If it is set true the default class is ic-preloader.
• loadingClass css-class : Class applied to the containers while loading the image/s.
• preloadAllImages false / true : Wait the loading of all images in the containers to cover itself with the image and to remove ladingClass and preloader element (maybe the container sizes depend from inner images). If it's set false (default) he preloads only the image used to cover the container.
• css2 false / true : If it's true avoid CSS3 features and force to use CSS2 procedure (used for old browsers).
• runOnce false / true: If it's true don't monitor costantly the changes of the conatainers and use plugin in "oneshot" mode. If browser supports CSS3 (and css2 is not set) this options is ignored.
• throttle 200 / integer : Elapsed time in ms between checks the variation of the containers. (Used for css2 and old Browser). If browser supports CSS3 (and css2 is not set) this options is ignored.

##CSS and Style This plugin doesn't require to include any file .css, but if you want to style elements like class ic-loading or preloader element appended to the container, you'll have to do it yourself.

In this [demo] (http://dev.adostudio.it/jquery/imagecover/demo-background-loading.html) the .preloader selector has this class:

.preloader{
	background:white url(img/loading.gif) center center no-repeat;
	}

PS: Remember, the preloader elment is defined by addPreload option. Read options section for details.

##Browser Support IE8+ and all modern browsers.