jQuery Plugin For Swapping Image Sources On Window Resize - imageR

jQuery Plugin For Swapping Image Sources On Window Resize - imageR
File Size: 577 KB
Views Total: 574
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

imageR is a lightweight, cross-platform jQuery responsive image delivery solution which automatically delivers a perfect resolution image depending on the current browser size. Support both img tag and background image on any container element. Also provides a Wordpress plugin which can be easily implemented into your blog.

How to use it:

1. Include the following JS files on the html page and the imageR is ready for use.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/imageR.js"></script>

2. The plugin works on screen width with 3 sizes: small, medium(480px) and large(1024px). You're allowed to set the different images using the HTML5 data attributes as shown below:

<!-- normal img tag -->
<img class="js-imageR" 
<!-- background image -->
<span class="background-image js-imageR" 

3. Initialize the plugin and done.


4. Set the default breakpoints in pixels.

  small: '0', 
  medium: '480', 
  large: '1024'

Change log:


  • added options.

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