Commit f130bfff authored by Roni Choudhury's avatar Roni Choudhury
Browse files

Implemented mouseover descriptions for thumbnail representations of demos

parent 6980cf5a
......@@ -9,7 +9,7 @@ mixin thumbnail(ex)
a(href="#{ex.path}")
img(src="#{ex.path}/thumbnail.png")
.caption
h3 #{ex.title}
h3.title #{ex.title}
if ex.about
.description
p #{ex.about}
......@@ -5,7 +5,12 @@ $(function () {
"use strict";
$.getJSON("data/examples.json", function (examples) {
var rows = [];
var rows = [],
fadeIn,
fadeOut;
// Partition the example specs into groups of four (preserving their
// order).
_.each(examples, function (ex, i) {
var index = parseInt(i / 4);
......@@ -14,8 +19,27 @@ $(function () {
rows[index].push(ex);
});
// Use the examples template (which defers to thumbnailRow and then
// thumbnail jade mixins) to render the thumbnails.
$("#examples").html(template.examples({
rows: rows
}));
// Set up a function to fade in the description on mouseover.
fadeIn = function () {
$(this)
.find(".caption .description")
.fadeIn(250);
};
// Set up the inverse function to fade the description out on mouseout.
fadeOut = function () {
$(this)
.find(".caption .description")
.fadeOut(250);
};
// Set up the hover actions.
$(".thumbnail").hover(fadeIn, fadeOut);
});
});
[
{
"title": "Foobar",
"path": "examples/foobar",
"about": "Foo your bars"
},
{
"title": "Widget",
"path": "examples/widget"
}
]
[]
......@@ -10,3 +10,18 @@
.pager li > a.orange:hover
.pager li > a.orange:focus
background-color chocolate
.thumbnail .caption .description
position absolute
top 5px
left 20px
background rgba(50, 50, 50, 0.8)
width 252.5px
padding 2%
display none
color white
z-index 2
border-radius 3px
.thumbnail .caption h3.title
text-align center
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment