Merge remote-tracking branch 'origin/gh-pages' into 3.0-rc1-preparation

scottjehl · Jul 29, 2015 · c119f1d · c119f1d
1 parent 1ef1ac6
commit c119f1d
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 2 deletions.
diff --git a/examples/demo-05.html b/examples/demo-05.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset=utf-8 />
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<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='../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 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>
+
+
+
+	<h3><code>media</code> example with one APNG source qualified with a <code>type</code> attribute.</h3>
+		<p>Note: Picturefill supports APNG types on any source element, and will disregard a <code>source</code> if its type is not supported in a particular environment.
+		  </p>
+
+<pre><code>&lt;picture&gt;
+        &lt;!--[if IE 9]&gt;&lt;video style="display: none;"&gt;&lt;![endif]--&gt;
+        &lt;source srcset="../examples/images/ballanim.png" type="image/x-apng"&gt;
+        &lt;source srcset="../examples/images/ballanim.gif" type="image/gif"&gt;
+
+        &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
+        &lt;img srcset="../examples/images/ballanim.gif" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"&gt;
+&lt;/picture&gt;
+</code></pre>
+
+    <p>Also note that the Mime Type <code>image/x-apng</code>
+    is not real &mdash; it is only used by picturefill to distinguish between PNG and APNG (this is experimental and may be changed in a later release).</p>
+
+		<picture>
+				<!--[if IE 9]><video style="display: none;"><![endif]-->
+				<source srcset="../examples/images/ballanim.png" type="image/x-apng">
+				<source srcset="../examples/images/ballanim.gif" type="image/gif">
+
+				<!--[if IE 9]></video><![endif]-->
+				<img srcset="../examples/images/ballanim.gif" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+		</picture>
+
+
+
+	</body>
+</html>
diff --git a/examples/images/ballanim.gif b/examples/images/ballanim.gif
diff --git a/examples/images/ballanim.png b/examples/images/ballanim.png
diff --git a/examples/images/large.jp2 b/examples/images/large.jp2
diff --git a/examples/images/large.jxr b/examples/images/large.jxr
diff --git a/index.html b/index.html
@@ -49,11 +49,11 @@ <h3 class="hed-subsection">Picturefill Version 3.0.0 (RC 1)</h3>
 			<p>Version 3 is a full rewrite of the codebase featuring optimized performance, better emulation of native behavior, and new spec-based parsers. It also handles some of the quirks, shortcomings, and edge cases related to first-generation native implementations. For IE 9 and earlier, version 3 includes a small shim that polyfills the use of common media conditions (<code>min-width</code>, <code>max-width</code>, <code>min-height</code>, <code>max-height</code>). If you need old IE support for other media conditions, such as <code>orientation</code> or <code>aspect-ratio</code>, please additionally include the <a href="https://github.com/paulirish/matchMedia.js/">matchMedia polyfill</a>. Feedback on this release candidate is highly welcomed—if you encounter any problems, please <a href="https://github.com/scottjehl/picturefill/issues">file an issue on GitHub</a>.</p>
 			<ul>
 				<li>
-					<a href="#" class="download">picturefill.js</a>
+					<a href="https://cdn.rawgit.com/scottjehl/picturefill/3.0/dist/picturefill.js" class="download">picturefill.js</a>
 					<p class="meta">(development version, unminified code)</p>
 				</li>
 				<li>
-					<a href="#" class="download">picturefill.min.js</a>
+					<a href="https://cdn.rawgit.com/scottjehl/picturefill/3.0/dist/picturefill.min.js" class="download">picturefill.min.js</a>
 					<p class="meta">(production version, minified code)</p>
 				</li>
 			</ul>