sudoslider
Version:
An extremely versitile content-slider
139 lines (129 loc) • 5.22 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sudo Slider | Videos in the slider</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="STYLESHEET" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
<script>
$(document).ready(function(){
var videos = [];
videos[1] = loadVideo('video1', 'Oiuzt2E4NYc');
videos[2] = loadVideo('video2', 'gsyMiTx_CF8');
videos[3] = loadVideo('video3', 'hDlif8Km4S4');
var oldSlide = 1;
var sudoSlider = $("#frontPageSlider").sudoSlider({
effect: "slide",
numeric:true,
prevNext: false,
beforeanimation: function (slide) {
try {
var video = videos[oldSlide];
if (video && video.pauseVideo) {
video.pauseVideo();
}
} catch(ignored) {
}
oldSlide = slide;
}
});
// Load the video with the given videoId into the container with the given id.
function loadVideo(id, videoId, mute) {
if (!window.onYouTubePlayerAPIReady) {
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
window.youtubePlayerReady = false;
}
var player = false;
function loadPlayer () {
player = new YT.Player(id, {
height: '315',
width: '560',
videoId: videoId,
events: {
'onReady': function () {
if (mute) {
player.mute();
}
}
// 'onStateChange': onPlayerStateChange
}
});
sudoSlider.adjust();
}
if (!window.youtubePlayerReady) {
var oldFunction = window.onYouTubePlayerAPIReady;
window.onYouTubePlayerAPIReady = function () {
window.youtubePlayerReady = true;
loadPlayer();
if (oldFunction) {
oldFunction();
}
}
} else {
loadPlayer();
}
return {
playVideo : function () {
if (player) player.playVideo();
},
pauseVideo : function () {
if (player) player.pauseVideo();
}
};
}
});
</script>
</head>
<body>
<div id="container">
<!-- START MEDIUM SECTION -->
<h2>See the source code for how to do this. </h2>
<h2>Remember that only the default slide animation works well with flash content. </h2>
<div style="position: relative;">
<div id="frontPageSlider">
<div>
<div id="video1"></div>
</div>
<div>
<div id="video2"></div>
</div>
<div>
<div id="video3"></div>
</div>
</div>
<h2>You can always just insert a flash video into a slide <br/>
You only need to do these sorts of tricks if you want to pause the video when its not visible</h2>
</div>
</div>
<div style="width:728px;height:90px;margin:0 auto;">
<script type="text/javascript">
<!--
google_ad_client = "pub-8170632875475442";
/* Sudo Slider, lang horisontal */
google_ad_slot = "0149025622";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script type="text/javascript">
/* Google Analytics, please remove
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20484420-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* */
</script>
</body>
</html>