Mercurial > mozilla-the-big-picture
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");