Download
User Rating: 0/5 ( 0 votes)
Mimeo is a jQuery plugin for responsive images. Part of the Formstone Library.
Mimeo will work with any valid media query, however you may have to adjust the order of the source tags since they will be read top down.
Mimeo will also auto-detect srcset attributes and assign the proper source based on the current device's pixel ratio.
Mimeo supports IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9).
Source: formstone.it
1. INCLUDE JS FILES
<script src="jquery.js"></script>
<script src="jquery.fs.mimeo.js"></script>
2. HTML
<picture>
<source media="(min-width: 500px)" src="image-med.jpg">
<source media="(min-width: 740px)" src="image-large.jpg">
<source media="(min-width: 980px)" src="image-x-large.jpg">
<source src="image-small.jpg">
<img src="image-small.jpg">
</picture>
Simply markup your images using the proposed <picture> structure. The nested <img> source attribute should be set to the smallest source to reduce initial page load on mobile devices. Don't forget to set the image's width and height in CSS to maintain proper dimensions as the source changes.
3. JAVASCRIPT
$.mimeo();
4. EVENTS
Events are triggered on the target instance's element, unless otherwise stated.
|
OPTION |
DESCRIPTION |
|
change.mimeo |
Image source change; trigged on target element |
5. METHODS
Methods are publicly available to all active instances, unless otherwise stated.
update
Updates cache of active picture elements
$.mimeo("update");
6. EXAMPLES
Source Set
Mimeo will also auto-detect srcset attributes and assign the proper source based on the current device's pixel ratio:
<picture>
<source media="(max-width: Infinity)" srcset="image-x-large.jpg 1x, image-x-large-hr.jpg 2x">
<source media="(max-width: 980px)" srcset="image-large.jpg 1x, image-large-hr.jpg 2x">
<source media="(max-width: 740px)" srcset="image-med.jpg 1x, image-med-hr.jpg 2x">
<source media="(max-width: 500px)" srcset="image-small.jpg 1x, image-small-hr.jpg 2x">
<source srcset="image-small.jpg 1x, image-small-hr.jpg 2x">
<img src="image-small.jpg">
</picture>
IE Support
When supporting IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9). IE 9 also has a strange bug where source tags can only exist inside of a video tag. The fix is to simply wrap the picture tag in an IE9 conditional video tag:
<!--[if IE 9]>
<video>
<![endif]-->
<picture>
<span class="mimeo-source" media="(min-width: 500px)" src="image-med.jpg"></span>
<span class="mimeo-source" media="(min-width: 740px)" src="image-large.jpg"></span>
<span class="mimeo-source" media="(min-width: 980px)" src="image-x-large.jpg"></span>
<span class="mimeo-source" src="image-small.jpg"></span>
<img src="image-small.jpg">
</picture>
<!--[if IE 9]>
</video>
<![endif]-->
JS Tutorial
