xhtml-images
v1.0.1
Published
xhtml-images makes use of `<noscript>` and `<object>` tags to provide a picture given the dimensions of its container
Downloads
11
Maintainers
charlycosteReadme
xhtml-images 
A jQuery plugin to use responsive pictures without HTML5
Description
xhtml-images makes use of <noscript> and <object> tags to provide a picture
given the dimensions of its container.
Purposes of this plugin are:
- If Javascript is enabled, we want to display a well sized image
- If Javascript is disabled, we want to display a fallback image
- We don't want the brother to pre-load a big picture if we don't display it
- And we want it to be accessible!
How to use it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Images</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.xhtml-images.js"></script>
<script type="text/javascript">
$(function(){
$('noscript.image').xhtmlimages();
});
</script>
</head>
<body>
<div>
<noscript class="image">
<object type="image/png" data="http://placehold.it/850.png" width="850" height="850">
<object type="image/png" data="http://placehold.it/800.png" width="800" height="800">
<object type="image/png" data="http://placehold.it/750.png" width="750" height="750">
<object type="image/png" data="http://placehold.it/700.png" width="700" height="700">
<object type="image/png" data="http://placehold.it/650.png" width="650" height="650">
<img src="http://placehold.it/600.png" width="600" height="600" alt="this is a text alternative" />
</object>
</object>
</object>
</object>
</object>
</noscript>
</div>
</body>
</html>