Introduction

This plugin is for someone wanting <img/> tag having background cover effect. It can help you.

Arguments

Name Type Default Description
Bg_Settings Object position: center center
repeat: no-repeat
size: cover
attachment:scroll
These settings are similar from CSS background(Optional)
Method String Cover It’s provided 5 methods including ‘Cover’, ‘SetHeight’ , ‘DeviceHeight’, ‘RemoveCover’ and ‘ElSameHeight’(Optional)
Args Object null Some of the methods need type parameters.(ElSameHeight and SetHeight) (Optional)
Fn Function null A function to call once the cover is complete called once per matched element. (Optional)

Method

It’s going to tell you these methods’ definition.

Cover

It’s provided a basic image cover that gives original height to its parent’ element.

SetHeight

You can set a custom height for your image.
This method has two parameters including ‘custom_Height’ and ‘ratio’, therefore you have to settle it.

What is the ratio?
When your custom_Height’ value is greater than device’ height, it’ll be used custom_Height Multiplied by ratio to give a specific height.

DeviceHeight

Using device height to set image height.

RemoveCover

Removing all cover JavaScript

ElSameHeight

You can let image equal height with a specific element, so you have to give a parameter which is called “El”.

Example

Basic:

$('.selector').ImageCover();

Advanced

var bg_settings = {
  position: 'left center',
  attachment: 'fixed',
};

var args = {
  custom_Height: 300,
  ratio:         0.6,
};
$('.selector').ImageCover(bg_settings,'SetHeight',args,function() {
  // Do something after Cover is complete.
});

Download it

If you met bugs, please you’d comment on my project to let me know.
Image-cover

Facebook 功能:

Summary
jQuery plugin Image-cover
Article Name
jQuery plugin Image-cover
Description
This plugin is for someone wanting ``<img/>`` tag having background cover effect. It can help you.
Publisher Name
bonze