jQuery plugin Image-cover
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