Auto Swap Images On Mobile Device - jQuery responsiveImage.js

Auto Swap Images On Mobile Device - jQuery responsiveImage.js

Yet another jQuery responsive image plugin for cross-platform web apps that automatically swap the image sources depending on the screen sizes.

1. Load the jQuery library (slim build) and the jQuery responsiveImage.js script in your html document.

<script src="" 
<script src="responsiveimage.js"></script>

2. Prepare your images for different screen sizes.

// regular image
// for mobile

3. Insert the desktop version of your image into the webpage.

<img src="sample.jpg" class="for-mob">

4. Initialize the plugin and done. The plugin will automatically replace the 'sample.jpg' with the 'sample_mobile.jpg' on mobile devices which the screen size is less than 768px.

var RI = new ResponsiveImage();;
// re-init on window resize
(window).resize(function() {;

5. Customize the CSS selector of responsive images.

var RI = new ResponsiveImage({
    classSelector: '.for-mob'

6. Customize the suffix name of mobile images.

var RI = new ResponsiveImage({
    toAppend: '_mobile'

7. Customize the breakpoint where the image will be swapped.

var RI = new ResponsiveImage({
    minScreenSize: 768

8. To fix jQuery conflict issues, follow this step.

var RI = new ResponsiveImage({
    jQuery: $

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

  • Publication date: 20.03.2018
  • Source