Submit your widget

Mimeo Demo - A jQuery plugin for responsive images

Created 5 years ago   Views 13463   downloads 1686    Author benplum
Mimeo Demo - A jQuery plugin for responsive images
View DemoDownload
59
Share |

Start serving responsive images with the HTML5 picture tag today. Mimeo leverages the browser's internal media query matching system, window.matchMedia, to determine the appropriate image source and update accordingly.

Usage

Installation

Include the following resources on your page before initializing:

<script src="jquery.fs.mimeo.js"></script>

Bower

You can deploy and update via the command line with Bower:

bower install Mimeo

Implimentation

Simply markup your images using the proposed <picture> structure. The nested <img> tag's src attribute should be set to the smallest source image's path 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.

<picture>
	<source media="(max-width: Infinity)" src="image-large.jpg">
	<source media="(max-width: 740px)" src="image-med.jpg">
	<source src="image-small.jpg">
	<img src="image-small.jpg" alt="" />
</picture>
$.mimeo();

 

Events

Events are triggered on the target instance's element, unless otherwise stated.

OPTION DESCRIPTION
change.mimeo Image source change; trigged on target <picture> element

 

Methods

Methods are publicly available to all active instances, unless otherwise stated.

update

Updates cache of active picture elements

$.mimeo("update);