xi

xhtml-images

xhtml-images makes use of `<noscript>` and `<object>` tags to provide a picture given the dimensions of its container

Showing:

Popularity

Downloads/wk

0

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

xhtml-images Code Climate

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>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100