jQuery Plugin For Responsive Image Delivery - Image Replacer
File Size: | 3.45 MB |
---|---|
Views Total: | 504 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Image Replacer is a minimalist jQuery plugin designed for responsive web layout that helps you deal with responsive image delivery depending on the custom breakpoints.
See also:
- Lazy Loading and Multi-serving Image Plugin with jQuery - lazyResp
- Responsive Images Replacement with jQuery and HTML5 - Mimeo
- jQuery Plugin To Load Proper Image Based On Screen Size - Data Img
- Easy jQuery Responsive Image Plugin - Respify
- Easy Responsive Image Replacement Plugin - Responsive Images
- jQuery Responsive Image Plugin - Responsive Img
How to use it:
1. Load the jQuery image replacer plugin after you have jQuery library included.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="imageReplacer.min.js"></script>
2. Use data-*
attributes of your img
tag to define the image sources for different screen resolutions.
<img src="normal.jpg" data-sm="images/sm.jpg" data-md="images/md.jpg" data-lg="images/lg.jpg" data-xl="images/xl.jpg" >
3. Call the plugin on the image selector and done.
$(window).imageReplacer();
4. You can customize the breakpoints for image auto swapping during initialization. The default values are:
$(window).imageReplacer({ // custom breakpoints xl: { min:1600 }, lg: { min:1024, max:1599 }, md: { min: 800, max: 1023 }, sm: { max: 799 }, // default breakpoint default: 'xl', // Run the javascript on load to detect if already at a smaller size. onload:true });
This awesome jQuery plugin is developed by sebmak. For more Advanced Usages, please check the demo page or visit the official website.