randogoth/scopesessions.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

outsourced video related JS, fixed CSS things, added visualberlinFestival videos

Browse source
This commit is contained in:
Kiritan Flux 2017-01-27 11:29:45 +01:00
parent 0149d8e464
commit c0b7ca672c
91 changed files with 23073 additions and 17874 deletions
Download patch file Download diff file Expand all files Collapse all files

99
7_video_no_header_or_footer.html
View file

@ -26,9 +26,7 @@ permalink: /video_fullscreen/
{% assign allTopicsABC = allTopics | sort %}
<div class="content no-header">
<div class="row">
<div class="dark_bg col-md-10 col-md-offset-1">
<div class="button-group filter-button-group">
@ -45,7 +43,6 @@ permalink: /video_fullscreen/
<div class="row">
<div class="dark_bg col-md-10 col-md-offset-1">
<div id="video-roster" class="container-fluid">
{% for post in site.posts %}
@ -58,7 +55,7 @@ permalink: /video_fullscreen/
<div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3" vimeo="{{vimeo_id}}">
<div class="video-title">{{talk.artist}}</div>
<div class="playbutton"></div>
<div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p></div>
<div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">{% if post.number %}Session #{{ post.number }}, {% endif %}{{post.date_text}}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p><p class="visible-lg">{{talk.artist_bio}}</p></div>
</div>
{% endif %}
{% endfor %}
@ -70,92 +67,22 @@ permalink: /video_fullscreen/
<div id="player"></div>
<div id="close-button"></div>
</div>
</div>
</div>
</div
<div class="spacer"></div>
<div class="spacer"></div>
<div class="row spacer">
<div class="dark_bg col-md-10 col-md-offset-1">
<h4><i class="fa fa-newspaper-o"></i> Stay informed about our events and join our newsletter</h4>
{% include join_newsletter.html %}
</div>
</div>
</div> <!-- container -->
<script>
jQuery( document ).ready(function() {
jQuery('.videobox').each(function() {
var $this = jQuery(this);
jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
$this.css('background', 'url("' + data.thumbnail_url + '")');
$this.css('background-size', 'cover');
$this.css('background-position', 'center center');
});
$this.on('mouseover', function() {
var offset = $this.offset().left;
var center = jQuery(window).width()/2 - 50;
if( offset >= center) {
jQuery('#videotext').css('right', '');
jQuery('#videotext').css('left', '20px');
jQuery('#videotext').css('top', '80px');
} else {
jQuery('#videotext').css('left', '');
jQuery('#videotext').css('right', '20px');
jQuery('#videotext').css('top', '80px');
}
jQuery('#videotext').html($this.html());
$this.find(".playbutton").show();
timer = window.setTimeout(function() {
jQuery('#videotext').show(300);
}, 500);
});
$this.on('mouseout', function() {
jQuery('#videotext').hide();
$this.find(".playbutton").hide();
if (timer) {
window.clearTimeout(timer);
}
});
$this.on('click', function() {
jQuery('#videotext').hide();
$this.find("img").hide();
if (timer) {
window.clearTimeout(timer);
}
jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
var player = jQuery('#videoplayer #player');
player.html(data.html)
player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
var src = player.find( "iframe" ).attr('src');
player.find( "iframe" ).attr('src', src + "?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1");
});
jQuery('#videoplayer').fadeIn(300, function () {
jQuery.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
});
});
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 });
$('.filter-button-group').find('button').css('background-color', 'black');
$(this).css('background-color', '#5a4b68');
});
});
</script>
jQuery.getScript('/js/videoplayer.js');
</script>