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

File Size: 26.2 MB
Views Total: 849
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 

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

$(window).load(function() {


Change log:


  • fixed typo in owidth variable declaration


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


  • fix bugs.


  • 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.