Skip to content

Commit

Permalink
Updated demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@verlok
verlok committed Mar 16, 2014
1 parent be72a68 commit 4d6e564
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 22 deletions.
6 changes: 6 additions & 0 deletions TODO.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
- Merge the gh-pages branch
- Update the readme
- Release 2.0.0 on bower and GitHub
- Try to improve performances again, caching the sourcesData object -> version 2.0.1
- Add support to the src attribute, not only srcset -> version 2.0.2
- Add automated tests!!!
66 changes: 44 additions & 22 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,55 @@
<title>Responsive images using verlok/picturePolyfill - by Andrea Verlicchi</title>
<meta name="viewport" content="width=device-width">
<style>
body { margin: 0; padding: 0; text-align: center; }
.intro { padding: 0 16px; }
.outro { padding: 1px 16px; clear: both; }
body { margin: 0 0 2em 0; padding: 0; text-align: center; }
.element a, .element span, .element img { display: block; }
h2 { margin-top: 1.5em }
img { width: 100%; height: auto; border: 0; }
.element h2 { padding: 0 16px; }
.element:hover h2 { text-decoration: underline; }
@media screen and (min-width: 481px) {
.element { float: left; width: 50%; }
}
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
</style>
</head>
<body>
<div id="container">
<div class="intro">
<h1>Responsive images using <a href="https://github.com/verlok/picturePolyfill">PicturePolyfill</a> - Demo</h1>
<p>The following link contains two <strong>responsive images</strong> created using a real <code>&lt;picture&gt;</code> element, and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>

<h1>Responsive images using <a href="https://github.com/verlok/picturePolyfill">PicturePolyfill</a> - Demo</h1>
<p>The following link contains two <strong>responsive images</strong> created using a real <code>&lt;picture&gt;</code> element, and the <a href="https://github.com/verlok/picturePolyfill">picturePolyfill</a> script.</p>

<div class="cf">
<div class="element">
<h3>With HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440">
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480, http://demo.api.pixtulate.com/demo/large-2.jpg?w=960 2x"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1024 2x" media="(min-width: 481px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440 2x" media="(min-width: 1025px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960, http://demo.api.pixtulate.com/demo/large-2.jpg?w=1920 2x" media="(min-width: 1441px)"/>
<noscript>
<img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440" alt="A beautiful responsive image"/>
</noscript>
</picture>
</div>
<div class="element">
<h3>Without HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=480"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=512" media="(min-width: 481px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=720" media="(min-width: 1025px)"/>
<source srcset="http://demo.api.pixtulate.com/demo/large-2.jpg?w=960" media="(min-width: 1441px)"/>
<noscript>
<img src="http://demo.api.pixtulate.com/demo/large-2.jpg?w=1440" alt="A beautiful responsive image"/>
</noscript>
</picture>
</div>
</div>
<div class="element">
<h2>With HD (Retina) display support</h2>
<a href="#someLink1">

<p>Real time server side scaling is provided by <a href="http://www.pixtulate.com">Pixtulate</a>.</p>

<div class="cf">
<div class="element">
<h3>With HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">
<source srcset="img/480x480.gif, img/480x480x2.gif 2x"/>
<source srcset="img/768x768.gif, img/768x768x2.gif 2x" media="(min-width: 481px)"/>
Expand All @@ -35,11 +63,9 @@ <h2>With HD (Retina) display support</h2>
<img src="img/768x768.gif" alt="A beautiful responsive image"/>
</noscript>
</picture>
</a>
</div>
<div class="element">
<h2>Without HD (Retina) display support</h2>
<a href="#someLink2">
</div>
<div class="element">
<h3>Without HD (Retina) display support</h3>
<picture data-alt="A beautiful responsive image" data-default-src="img/1440x1440.gif">
<source srcset="img/480x480.gif"/>
<source srcset="img/768x768.gif" media="(min-width: 481px)"/>
Expand All @@ -49,13 +75,9 @@ <h2>Without HD (Retina) display support</h2>
<img src="img/768x768.gif" alt="A beautiful responsive image"/>
</noscript>
</picture>
</a>
</div>
<!--
<div class="outro">
<p>Real time server side scaling is provided by <a href="http://www.pixtulate.com">Pixtulate</a>.</p>
</div>
</div>
-->

</div>
<script src="picturePolyfill.js"></script>
</body>
Expand Down

0 comments on commit 4d6e564

Please sign in to comment.