jQuery Plugin For Responsive Image with Focus Area - Responsify.js

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.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="responsify.js"></script>

2. Insert an image into the webpage and define a focus area using html5 data-focus-* attributes as follow.

<img src="1.png" alt="" 
     data-focus-left=".15" 
     data-focus-top=".12" 
     data-focus-right=".79" 
     data-focus-bottom=".66"
>

3. Initialize the plugin on window load and window resize events.

$(window).load(function() {
  $('img').responsify();
});

$(window).resize(function(){
  $('img').responsify();
})

Change log:

2015-12-04

• fixed typo in owidth variable declaration

2015-11-28

• add $(this) selector cached & small format tweaks

2015-11-27

• fix bugs.

2015-11-26

• add the focus area app

---

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