From 9a64648b4a6ae74fdda850c667711f80e9e6ddb4 Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 29 Dec 2013 23:15:34 -0500 Subject: hover-style image picker --- js/gallery.js | 25 +++++++++++++++++++++++-- shader-picker.html | 22 ++++++++++------------ 2 files changed, 33 insertions(+), 14 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() +} diff --git a/shader-picker.html b/shader-picker.html index a6d1e12..db508aa 100644 --- a/shader-picker.html +++ b/shader-picker.html @@ -28,8 +28,9 @@ div { display: inline-block; padding: 10px;} .close,.remove { cursor: pointer; } #uploaded-url { display: none; width: 300px; } form { display: inline-block; } -#gallery-images img { max-width: 200px; height: 90px; margin: 5px; } #gallery { clear: right; width:100%;} +#gallery-images { display: block; max-height: 210px; overflow-y: auto; } +#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; } @@ -40,7 +41,7 @@ form { display: inline-block; } - +

@@ -81,7 +82,7 @@ form { display: inline-block; } - +
@@ -365,9 +366,7 @@ function render (){ $("#render").html("rendering") } -function status(s){ - $("#status").html(s) -} +function status(s){ $(".status").html(s) } var encoder = new GifEncoder() @@ -433,12 +432,11 @@ function upload(){