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

jQuery Plugin For Responsive Image with Focus Area - Responsify.js
File Size: 26.2 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.