Instantly share code, notes, and snippets.

Embed
What would you like to do?
<div class="thumb-wrap">
<div class="thumb-container">
{% for project_hash in site.data.work.projects %}
{% assign project = project_hash[1] %}
<a aria-label="{{ project.engagement-type }}: {{ project.name }}; Tenure: {{ project.tenure | replace: '-','to' }}"
class="thumb-unit-wrap" href="/work/{{project.folder}}/page">
<div class="thumb-unit">
<img src="assets/img/work/{{project.folder}}/thumb.{{project.thumb}}" alt="" />
<span class="" aria-hidden=true>{{ project.tenure }}</span>
</div>
<div class="thumb-overlay">
<strong aria-hidden=true>{{ project.name }}</strong>
</div>
</a>
{% endfor %}
</div>
</div>
// do this when a work item is clicked
function workLoad($this) {
$.ajaxSetup({ cache: true });
var newTitle = $this.find('strong').text(),
spinner = '<div class="loader">Loading...</div>',
href = $this.attr("href"),
newHTML = href.substr(0, href.indexOf("/page") + 1);
$('.project-load').html(spinner).load(newHTML, function() {
$this.attr("aria-expanded", "true");
$(".work-wrap").attr("aria-hidden", "false");
$('.project-title').text(newTitle)
.attr('aria-label', 'Project or Engagement details: ' + newTitle).focus();
});
}
// do this when go back to the list
$('.work-container').hide(800, function() {
$(".work-wrap").attr("aria-hidden", "true");
$this.attr("aria-expanded", "false").focus();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment