136 lines
4.2 KiB
HTML
136 lines
4.2 KiB
HTML
---
|
||
layout: page
|
||
title: Video showcase
|
||
icon: video
|
||
visible: false
|
||
permalink: /video/
|
||
---
|
||
|
||
{% assign allTopics = "" | split:"|" %}
|
||
{% for post in site.posts %}
|
||
{% for talk in post.talks %}
|
||
{% if talk.talk_video_url %}
|
||
{% for topic in talk.topics %}
|
||
{% assign talkTopics = topic | split:"," %}
|
||
{% for talkTopic in talkTopics %}
|
||
{% assign tt = talkTopic | strip | downcase %}
|
||
{% unless allTopics contains tt %}
|
||
{% assign allTopics = allTopics | push: tt %}
|
||
{% endunless %}
|
||
{% endfor %}
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% endfor %}
|
||
|
||
{% assign allTopicsABC = allTopics | sort %}
|
||
|
||
<div class="button-group filter-button-group">
|
||
<button data-filter="*">show all</button>
|
||
{% for thisTopic in allTopicsABC %}
|
||
<button data-filter=".{{thisTopic | strip | replace: " ", "-"}}">{{thisTopic | capitalize }}</button>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<div id="video-roster" class="content container-fluid">
|
||
|
||
{% for post in site.posts %}
|
||
|
||
{% for talk in post.talks %}
|
||
|
||
{% if talk.talk_video_url %}
|
||
|
||
{% assign vimeo_id = talk.talk_video_url | remove:'https://vimeo.com/' %}
|
||
|
||
{% if talk.topics %}
|
||
{% assign tags = (talk.topics | split:",") %}
|
||
{% endif %}
|
||
|
||
<div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}}" vimeo="{{vimeo_id}}">
|
||
<div class="video-title">{{talk.title}}</div>
|
||
<img class="playbutton" src="/images/play-button.png" />
|
||
<div class="video-description"><p><span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – <span class="video-session">#{{ post.number }}</span>: {{talk.description}}</p></div>
|
||
</div>
|
||
|
||
{% endif %}
|
||
|
||
{% endfor %}
|
||
|
||
{% endfor %}
|
||
|
||
<div id="videotext"></div>
|
||
|
||
<div id="videoplayer">
|
||
<div id="player"></div>
|
||
<div id="close-button"></div>
|
||
</div>
|
||
|
||
</div> <!-- container -->
|
||
|
||
<script>
|
||
|
||
jQuery( document ).ready(function() {
|
||
jQuery('.videobox').each(function() {
|
||
var $this = jQuery(this);
|
||
jQuery.getJSON('http://www.vimeo.com/api/v2/video/' + jQuery(this).attr('vimeo') + '.json?callback=?', {format: "json"}, function(data) {
|
||
$this.css('background', 'url("' + data[0].thumbnail_large + '")');
|
||
$this.css('background-size', 'cover');
|
||
//$this.css('height', (($this.width()/4)*3));
|
||
});
|
||
|
||
$this.on('mouseover', function() {
|
||
var offset = $this.offset();
|
||
var center = jQuery(window).width()/2;
|
||
if( offset.left > center) {
|
||
jQuery('#videotext').css('right', '');
|
||
jQuery('#videotext').css('left', '20px');
|
||
} else {
|
||
jQuery('#videotext').css('left', '');
|
||
jQuery('#videotext').css('right', '20px');
|
||
}
|
||
jQuery('#videotext').html($this.html());
|
||
$this.find("img").show();
|
||
timer = window.setTimeout(function() {
|
||
jQuery('#videotext').show(300);
|
||
}, 500);
|
||
});
|
||
|
||
$this.on('mouseout', function() {
|
||
jQuery('#videotext').hide();
|
||
$this.find("img").hide();
|
||
if (timer) {
|
||
window.clearTimeout(timer);
|
||
}
|
||
});
|
||
|
||
$this.on('click', function() {
|
||
jQuery('#videotext').hide();
|
||
$this.find("img").hide();
|
||
if (timer) {
|
||
window.clearTimeout(timer);
|
||
}
|
||
jQuery('#videoplayer #player').html('<iframe src="http://player.vimeo.com/video/'+$this.attr('vimeo')+'?title=0&byline=0&portrait=0&autoplay=1" width="100%" height="100%" frameborder="0"></iframe>');
|
||
jQuery('#videoplayer').fadeIn(300);
|
||
});
|
||
|
||
jQuery('#videoplayer').on('click', function() {
|
||
jQuery(this).fadeOut(500, function() {
|
||
jQuery('#videoplayer #player').html('');
|
||
});
|
||
});
|
||
|
||
});
|
||
$('#video-roster').isotope({
|
||
// options
|
||
itemSelector: '.videobox'
|
||
});
|
||
// init Isotope
|
||
var $grid = $('#video-roster').isotope({
|
||
});
|
||
// filter items on button click
|
||
$('.filter-button-group').on( 'click', 'button', function() {
|
||
var filterValue = $(this).attr('data-filter');
|
||
$grid.isotope({ filter: filterValue });
|
||
});
|
||
});
|
||
</script>
|