This is a simple library that handles changing src attribute on a selected image tag. To be used for a large header images cropped for different screen resolutions.
NB! The src attribute of a target img should be initially empty to prevent original large picture from loading. Use it if you need a fully cross-browser solution. Currently tested on IE6-IE11. Other browsers are supported as well.
You should have something like this as you directory structure under the main image path:
.
├── 1024
│ └── picture.jpg
├── 800
│ └── picture.jpg
├── 320
│ └── picture.jpg
└── picture.jpg
This kind of automatic resize/cropping can be easily accomplished by following Grunt and Gulp plugins:
-
Include it on your page:
<script type="text/javascript" src="image-swap.js"></script>
-
Get the image element:
<img id="picture" src=""/> var pictureId = document.getElementById('picture');
-
Define the options:
var options = { picture: pictureId, name: 'picture.jpg', path: '/assets/images/', resolutions: { large: 1024, medium: 800, small: 320 } };
-
Pass the options to a newly created object:
var Sizes = new ImageSwap(options);
-
Optionally, call an update method on window resize event to see the changes right away:
window.addEventListener('resize', function() { Sizes.update(); });
picture - ID of a target element.
name - filename of the image.
path - full path to the image.
resolutions - definition of small, medium and large screen sizes. This number will append to your path option.