80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
|
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.css('background-repeat', 'no-repeat');
|
||
|
|
});
|
||
|
|
|
||
|
|
$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() {
|
||
|
|
if( document.body.clientWidth >= 768 ) {
|
||
|
|
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&byline=0&portrait=0&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');
|
||
|
|
});
|