Mercurial > mozilla-the-big-picture

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mbp.css	Fri Nov 27 23:39:25 2009 -0500
@@ -0,0 +1,39 @@
+body {
+    background: white;
+}
+
+.mbp-entry {
+    font-family: helvetica;
+    font-size: 12pt;
+    width: 10em;
+}
+
+.mbp-entry .title {
+    font-style: oblique;
+}
+
+.mbp-entry .date {
+    font-size: 9pt;
+    color: gray;
+}
+
+.mbp-entry img {
+    border: none;
+}
+
+.mbp-entry .thumbnail {
+    width: 10em;
+    height: 10em;
+}
+
+.mbp-entry .caption {
+    font-size: 8pt;
+}
+
+.mbp-entry .large {
+    display: none;
+}
+
+.mbp-entry .small {
+    display: inline;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mbp.html	Fri Nov 27 23:39:25 2009 -0500
@@ -0,0 +1,29 @@
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <base target="_blank" />
+  <link rel="stylesheet" type="text/css" media="all"
+        href="mbp.css" />
+  <title>Mozilla: The Big Picture</title>
+</head>
+<body>
+<div id="container" style="display: none;">
+<div class="mbp-entry">
+  <a class="link"
+     href="http://blog.mozilla.com/blog/2009/11/06/firefox-goes-mobile-winner-announced-plus-a-new-design-challenge/">
+    <img class="small large"
+         src="http://creative.mozilla.org/images/designs/0/346/346_lg.jpg"
+         style="clip: rect(136, 375, 261, 250);"/>
+  </a>
+  <div class="title">Pocketfox</div>
+  <div class="date">11.6.09</div>
+  <div class="caption">Yaroslaff Chekunov's winning entry for the
+  Mozilla Creative Collective's “Firefox Goes Mobile” Design Challenge
+  is now the official emblem for the upcoming mobile version of
+  Firefox.</div>
+</div>
+</div>
+</body>
+<script src="jquery.js"></script>
+<script src="mbp.js"></script>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/mbp.js	Fri Nov 27 23:39:25 2009 -0500
@@ -0,0 +1,40 @@
+$(window).ready(
+  function() {
+    var rectRegexp = /rect\((\d+)px,? (\d+)px,? (\d+)px,? (\d+)px\)/;
+    var loadsLeft = 0;
+    $(".mbp-entry img.small").each(
+      function() {
+        loadsLeft++;
+        this.addEventListener(
+          "load",
+          function() {
+            loadsLeft--;
+            var clip = $(this).css("clip");
+            var parts = clip.match(rectRegexp);
+            var crop = {top: parts[1],
+                        right: parts[2],
+                        bottom: parts[3],
+                        left: parts[4]};
+            crop.width = crop.right - crop.left;
+            crop.height = crop.bottom - crop.top;
+            var canvas = document.createElement("canvas");
+            $(canvas).addClass("thumbnail");
+            $(this).before(canvas);
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(this,
+                          crop.left,
+                          crop.top,
+                          crop.width,
+                          crop.height,
+                          0,
+                          0,
+                          canvas.width,
+                          canvas.height);
+            $(this).remove();
+            if (loadsLeft == 0)
+              $("#container").fadeIn();
+          },
+          false
+        );
+      });
+  });