changeset 24:cbaef654b9da

show full-size image on mouseover of thumbnail. increase darkness of countdown text.
author Atul Varma <varmaa@toolness.com>
date Sat, 28 Nov 2009 13:12:53 -0500
parents 6cf1f35c9c86
children ae69b2280e05
files mbp.css mbp.html mbp.js
diffstat 3 files changed, 19 insertions(+), 1 deletions(-) [+]
line wrap: on
line diff
--- a/mbp.css	Sat Nov 28 12:30:48 2009 -0500
+++ b/mbp.css	Sat Nov 28 13:12:53 2009 -0500
@@ -2,13 +2,14 @@
     background: #f6f6f6;
     color: #222222;
     font-family: helvetica;
+    overflow-y: scroll;
 }
 
 #countdown {
     padding-top: 4em;
     text-align: center;
     font-size: 24pt;
-    color: #eeeeee;
+    color: gray;
 }
 
 #container {
@@ -62,3 +63,12 @@
 .mbp-entry .small {
     display: inline;
 }
+
+br {
+    clear: left;
+}
+
+#images {
+    padding-top: 4pt;
+    text-align: center;
+}
--- a/mbp.html	Sat Nov 28 12:30:48 2009 -0500
+++ b/mbp.html	Sat Nov 28 13:12:53 2009 -0500
@@ -107,6 +107,8 @@
   the browser.</div>
 </div>
 </div>
+<br/>
+<div id="images"></div>
 </body>
 <script src="jquery.js"></script>
 <script src="mbp.js"></script>
--- a/mbp.js	Sat Nov 28 12:30:48 2009 -0500
+++ b/mbp.js	Sat Nov 28 13:12:53 2009 -0500
@@ -31,6 +31,12 @@
             crop.width = crop.right - crop.left;
             crop.height = crop.bottom - crop.top;
             var canvas = document.createElement("canvas");
+            var self = $(this).clone();
+            $(canvas).mouseenter(
+              function() {
+                $("#images").empty();
+                $("#images").append(self);
+              });
             $(canvas).addClass("thumbnail");
             $(this).before(canvas);
             var ctx = canvas.getContext("2d");