This time I will share jQuery Plugin and tutorial about jQuery Plugin For Responsive Image with Focus Area – Responsify.js, hope it will help you in programming stack.
Responsify.js is a smart jQuery responsive image solution which allows you to define a focus area on an image and make it always be visible in the viewport when window resizing.
How to use it:
1. Load the jQuery responsify.js plugin after loading jQuery JavaScript library. Put the following snippets at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
2 |
<script src="responsify.js"></script> |
2. Insert an image into the webpage and define a focus area using html5 data-focus-* attributes as follow.
1 |
<img src="1.png" alt="" |
5 |
data-focus-bottom=".66" |
3. Initialize the plugin on window load and window resize events.
1 |
$(window).load(function() { |
5 |
$(window).resize(function(){ |
Change log:
2015-12-04
- fixed typo in owidth variable declaration
2015-11-28
- add $(this) selector cached & small format tweaks
2015-11-27
2015-11-26
This awesome jQuery plugin is developed by wentin. For more Advanced Usages, please check the demo page or visit the official website.
