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.
How to use it:
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"></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: $
});