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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="responsiveimage.js"></script>

2. Prepare your images for different screen sizes.

// regular image
sample.jpg
// for mobile
sample_mobile.jpg

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();
RI.run();
// re-init on window resize
(window).resize(function() {
  RI.run();
});

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