This time I will share jQuery Plugin and tutorial about Auto Swap Background Images Based On Screen Size – swapBackground, hope it will help you in programming stack.
swapBackground is a jQuery plugin for responsive, cross-platform background images that automatically swaps the background image sources on different screen resolutions.
How to use it:
1. Add the latest version of jQuery library and the jQuery swapBackground plugin’s JavaScript to the webpage.
1 |
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script> |
2 |
<script src="swapBackground.js"></script> |
2. Initialize the plugin on the target container and specify the image sources on different screen resolutions.
1 |
<div class="container"></div> |
1 |
$('.container').swapBackground({ |
3. In this case, the plugin will load the ‘lg.jpg’ when the screen size is larger than 1024px and change the background image to ‘sm.jpg’ when the screen size is smaller than 1024px. You can specify the default breakpoint in the JavaScript as this:
1 |
$('.container').swapBackground({ |
4. Alternatively you can apply the same options with ‘data’ attributes on the container element.
1 |
$('.container').swapBackground({ |
This awesome jQuery plugin is developed by chaddugas. For more Advanced Usages, please check the demo page or visit the official website.
