jQuery & CSS3 Powered Responsive Image Solution

css3ri.js is a jQuery plugin that uses CSS3 media queries to detect the screen size and loads in the appropriate images for 4 different screen resolutions.

Predefined resolutions:

• xs: 0 - 360px
• xm: 360px - 756px
• md: 756px - 1024px
• lg: larger than 1024px

How to use it:

1. Load the latest version of jQuery library and the jQuery css3ri.js script at the end of the document.

<script src="jquery.min.js"></script>
<script src="js/jquery.css3ri.js"></script>

2. Insert your images into the document like this:

<img src="loading.gif" 
     data-toggle="responsive"
     data-xs="xs.jpg"
     data-sm="sm.jpg"
     data-md="md.jpg"
     data-lg="lg.jpg">

3. That's it. You can change the default resolutions by editing the jquery.css3ri.js file.

var resolutions = {
    xs: 0,
    sm: 360,
    md: 756,
    lg: 1024
};

---

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