jQuery Plugin For Swapping Image Sources On Window Resize - imageR

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" 
     data-small="small.jpg" 
     data-medium="medium.jpg" 
     data-large="large.jpg"
     >
     
<!-- background image -->
<span class="background-image js-imageR" 
      data-small="small.jpg" 
      data-medium="medium.jpg"
      data-large="large.jpg">
</span>

3. Initialize the plugin and done.

$('.js-imageR').imageR();

4. Set the default breakpoints in pixels.

$('.js-imageR').imageR({
  small: '0', 
  medium: '480', 
  large: '1024'
});

Change log:

2017-01-30

• added options.

---

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