Skip to content
This repository has been archived by the owner on Sep 6, 2022. It is now read-only.

Commit

Permalink
moving examples to examples folder. #204
Browse files Browse the repository at this point in the history
  • Loading branch information
@scottjehl
scottjehl committed Apr 22, 2014
1 parent 0ed16a0 commit 6012ae9
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 41 deletions.
4 changes: 2 additions & 2 deletions dist/picturefill.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! Picturefill - v2.0.0-alpha - 2014-04-21
/*! Picturefill - v2.0.0-alpha - 2014-04-22
* http://scottjehl.github.io/picturefill
* Copyright (c) 2014 https://github.com/scottjehl/picturefill/blob/master/Authors.txt; Licensed MIT */
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
Expand Down Expand Up @@ -229,7 +229,7 @@ window.matchMedia || (window.matchMedia = function() {
* If sizes is specified, resolution is calculated
*/
pf.getCandidatesFromSourceSet = function( srcset, sizes ) {
var candidates = pf.trim( srcset ).split( /\s*,\s*/ );
var candidates = pf.trim( srcset ).split( /,\s+/ );
var formattedCandidates = [];
var widthInCssPixels;
if ( sizes ) {
Expand Down
4 changes: 2 additions & 2 deletions dist/picturefill.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions demo-01.html → examples/demo-01.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
<title>Picturefill - Demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>
<link href='../examples/styles.css' rel='stylesheet' type='text/css'>

<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
</script>
<script async="true" src="dist/picturefill.js"></script>
<script async="true" src="../dist/picturefill.js"></script>
</head>
<body>
<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>
Expand All @@ -21,13 +21,13 @@

<h3>An img with "srcset" and sizes" attributes:</h3>
<pre><code>&lt;img sizes=&quot;(max-width: 30em) 100%, (max-width: 50em) 75%, 50%&quot;
srcset=&quot;examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w&quot; alt=&quot;Obama with soldiers&quot;&gt;
srcset=&quot;../examples/images/pic-small.png 400w, ../examples/images/pic-medium.png 800w, ../examples/images/pic-large.png 1200w&quot; alt=&quot;Obama with soldiers&quot;&gt;
</code></pre>

<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>

<img sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
srcset="examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w" alt="Obama with soldiers">
srcset="../examples/images/pic-small.png 400w, ../examples/images/pic-medium.png 800w, ../examples/images/pic-large.png 1200w" alt="Obama with soldiers">



Expand Down
20 changes: 10 additions & 10 deletions demo-02.html → examples/demo-02.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
<title>Picturefill - Demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>
<link href='../examples/styles.css' rel='stylesheet' type='text/css'>

<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
</script>
<script async="true" src="dist/picturefill.js"></script>
<script async="true" src="../dist/picturefill.js"></script>
</head>
<body>
<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>
Expand All @@ -24,23 +24,23 @@ <h3>Supporting Picture in Internet Explorer 9</h3>

<pre><code>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
&lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
&lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
&lt;source srcset=&quot;examples/images/medium.jpg&quot;&gt;
&lt;source srcset=&quot;../examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
&lt;source srcset=&quot;../examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
&lt;source srcset=&quot;../examples/images/medium.jpg&quot;&gt;
&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
&lt;img srcset=&quot;examples/images/medium.jpg&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;img srcset=&quot;../examples/images/medium.jpg&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<source srcset="examples/images/medium.jpg">
<source srcset="../examples/images/extralarge.jpg" media="(min-width: 1000px)">
<source srcset="../examples/images/large.jpg" media="(min-width: 800px)">
<source srcset="../examples/images/medium.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<img srcset="../examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>


Expand Down
16 changes: 8 additions & 8 deletions demo-03.html → examples/demo-03.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
<title>Picturefill - Demo</title>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<link href='src/styles.css' rel='stylesheet' type='text/css'>
<link href='../examples/styles.css' rel='stylesheet' type='text/css'>

<script>
// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
document.createElement( "picture" );
</script>
<script async="true" src="dist/picturefill.js"></script>
<script async="true" src="../dist/picturefill.js"></script>
</head>
<body>
<a href="http://responsiveimages.org/" class="ricg"><img src="https://raw.github.com/ResponsiveImagesCG/meta/master/logo/Web/RICG_logo_small.png"></a>
Expand All @@ -24,19 +24,19 @@ <h3><code>media</code> and <code>srcset</code> syntax:</h3>

<pre><code>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
&lt;source srcset=&quot;examples/images/large.jpg, examples/images/extralarge.jpg 2x&quot; media=&quot;(min-width: 800px)&quot;&gt;
&lt;source srcset=&quot;examples/images/small.jpg, examples/images/medium.jpg 2x&quot;&gt;
&lt;source srcset=&quot;../examples/images/large.jpg, ../examples/images/extralarge.jpg 2x&quot; media=&quot;(min-width: 800px)&quot;&gt;
&lt;source srcset=&quot;../examples/images/small.jpg, ../examples/images/medium.jpg 2x&quot;&gt;
&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
&lt;img srcset=&quot;examples/images/small.jpg, examples/images/medium.jpg 2x&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;img srcset=&quot;../examples/images/small.jpg, ../examples/images/medium.jpg 2x&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
<source srcset="examples/images/small.jpg, examples/images/medium.jpg 2x">
<source srcset="../examples/images/large.jpg, ../examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
<source srcset="../examples/images/small.jpg, ../examples/images/medium.jpg 2x">
<!--[if IE 9]></video><![endif]-->
<img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<img srcset="../examples/images/small.jpg, ../examples/images/medium.jpg 2x" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>


Expand Down
Loading

0 comments on commit 6012ae9

Please sign in to comment.