It's a simple jQuery plugin used in the specific situations which you want your images has cover' effect. It's based on CSS background.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Readme.md
image_cover.js
package-lock.json
package.json

Readme.md

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.
});