hover-style image picker

1 files changed, 23 insertions, 2 deletions

diff --git a/js/gallery.js b/js/gallery.js
index 9b2372d..16ecdd8 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -10,7 +10,7 @@ gallery.init = function(){
 gallery.bind = function(){
   $("#gallery-random").click(asdf.random)
   $("#gallery-search").submit(dumpfm.search)
-  $(document).on("click", "#gallery-images img", gallery.choose)
+  $(document).on("click", "#gallery-images canvas", gallery.click)
   status("ready")
 }
 
@@ -25,9 +25,30 @@ gallery.load = function(ims){
 gallery.image = function(im){
   var img = new Image ();
   img.onload = function(){
-    $("#gallery-images").append(img);
+    var tall = 100
+    var aspect = img.naturalHeight / img.naturalWidth
+    var side = ~~(tall/aspect)
+    var thumb = cq(side,tall)
+    thumb.drawImage(img,0,0,side,tall)
+    $(img).hide()
+    $("#gallery-images").append(thumb.canvas).append(img);
+    $(thumb.canvas).mouseover(function(){
+      $(thumb.canvas).hide()
+      $(img).show()
+    })
+    img.width = side
+    img.height = tall
+    $(img).mouseout(function(){
+      $(img).hide()
+      $(thumb.canvas).show()
+    })
+    $(img).click(gallery.choose);
   }
   try { img.src = im.url; }
   catch(e){ return; }
   if (img.complete) img.onload();
 }
+
+gallery.click = function(){
+  gallery.choose()
+}