-
-
Save skynet/3e0af77bca07255f9b30fa4c6794aaec to your computer and use it in GitHub Desktop.
Wire up Galleria to detect YouTube and Vimeo videos playing so it pauses the slideshow while videos are playing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var autoplayLength = 8000; | |
var gallery = false; | |
var ytplayer = false; | |
$(function() { | |
if (window.addEventListener) { | |
window.addEventListener('message', messageReceived, false); | |
} else { | |
window.attachEvent('onmessage', messageReceived, false); | |
} | |
$('#slides').each(function() { | |
Galleria.ready(function() { | |
gallery = this; | |
// see if we need any youtube stuff | |
var count = this.getDataLength(); | |
for (var x=0; x < count; x++) { | |
var data = this.getData(x); | |
if (data.iframe && data.iframe.indexOf('//www.youtube.com/') > -1) { | |
// load up youtube js | |
var tag = document.createElement('script'); | |
tag.src = "//www.youtube.com/iframe_api"; | |
$('body').append(tag); | |
break; | |
} | |
} | |
}); | |
Galleria.on('image', function(e) { | |
if (e.imageTarget.src.indexOf('//player.vimeo.com/') > -1) { | |
// vimeo video | |
var id = e.imageTarget.id; | |
var url = e.imageTarget.src.split('?')[0]; | |
var vimeoWin = $('#' + id)[0].contentWindow; | |
vimeoWin.postMessage(JSON.stringify({method:'addEventListener', value:'pause'}), url); | |
vimeoWin.postMessage(JSON.stringify({method:'addEventListener', value:'finish'}), url); | |
vimeoWin.postMessage(JSON.stringify({method:'addEventListener', value:'playProgress'}), url); | |
} else if (e.imageTarget.src.indexOf('//www.youtube.com/') > -1) { | |
// youtube video | |
ytplayer = new YT.Player(e.imageTarget.id, { | |
events: { | |
'onStateChange': function(e) { | |
switch(e.data) { | |
case YT.PlayerState.BUFFERING: | |
case YT.PlayerState.PLAYING: | |
gallery.pause(); | |
break; | |
case YT.PlayerState.ENDED: | |
gallery.next(); | |
break; | |
case YT.PlayerState.PAUSED: | |
gallery.play(autoplayLength); | |
} | |
} | |
} | |
}); | |
} | |
}); | |
Galleria.run('#homeSlides', { | |
autoplay: autoplayLength, | |
responsive: true, | |
thumbnails: 'empty', | |
showCounter: false, | |
slideshow: true, | |
vimeo: { api: 1 }, | |
youtube: { enablejsapi: 1 } | |
}); | |
}); | |
}) | |
function messageReceived(e) { | |
var data = JSON.parse(e.data) | |
switch(data.event) { | |
case 'playProgress': | |
// need to pause player | |
gallery.pause(); | |
break; | |
case 'finish': | |
// go to next slide | |
gallery.next(); | |
break; | |
case 'pause': | |
// start the slideshow again | |
gallery.play(autoplayLength); | |
break; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment