Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
img
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

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:


Install

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published