jQuery Plugin To Make IMG Act Like A Responsive Background - makeCover

File Size: 17 KB
Views Total: 670
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Make IMG Act Like A Responsive Background - makeCover

makeCover is a jQuery plugin that makes your img tag behavior like a background with background-size:cover property. Very useful for your cross-platform websites that automatically resizes, crops and re-positions the images to fit within the viewport.

How to use it:

1. To get started, include the jQuery makeCover plugin's script after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
<script src="jquery.makeCover.js"></script> 

2. Then wrap your image into a DIV container like this:

<div class="cover">
  <img src="demo.jpg"> 
</div>

3. Finally, just call the plugin on the DIV container and done.

$('.cover').makeCover();

4. Set the image' horizontal & vertical positions when resized.

$('.cover').makeCover({

  // left, center, right
  'positionHorizontal': 'center', 

  // top, middle, bottom
  'positionVertical': 'middle',   
  
});

5. Available callback functions which are triggered after / before the resize.

$('.cover').makeCover({

  'beforeMove': null,
  'afterMove': null

});

This awesome jQuery plugin is developed by classikd. For more Advanced Usages, please check the demo page or visit the official website.