Show preview of the gorgeous gif when hovering over link

This change improves selecting the right gif by 238%. When hovering with le mouse over a link, it shows the corresponding gif in the sidebar.
sahwar · Feb 7, 2014 · 0a2905e · 0a2905e
1 parent 09e6e8b
commit 0a2905e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -8,12 +8,26 @@
   <header class="page-header">
     <img src="/aha/aha.gif" alt="" class="banner-img">
     {{ content }}
+
+    <img src="" id="preview" class="banner-img">
   </header>
 
   <div class="gif-listing">
   {% include site-index.html %}
   </div>
 
+  <script type="text/javascript">
+    var preview = document.getElementById("preview");
+
+    function hoverListener(evt) {
+      preview.src = evt.target.href;
+    };
+
+    var links = document.getElementsByClassName("gif");
+    for(var i=0; i<links.length; i++) {
+      links[i].addEventListener("mouseover", hoverListener);
+    }
+  </script>
 </body>
 
 {% include closing-tags.html %}
diff --git a/script/build_site_index b/script/build_site_index
@@ -35,7 +35,8 @@ list.ul do |builder|
             li.a(
               File.basename(gif),
               "href"  => gif,
-              "title" => gif
+              "title" => gif,
+              "class" => "gif"
             )
           end
         end