sudoslider
Version:
An extremely versitile content-slider
337 lines (300 loc) • 16.3 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sudo Slider | The frontpage standalone</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>
<style type="text/css">
body {
background: url('http://webbies.dk/assets/templates/SudoSlider/images/bg/bg_limited.gif') repeat-x #fff;
}
#frontPageSlider ul, #frontPageSlider li{margin:0;padding:0;list-style:none;position:relative;display:block;}
#frontPageSlider, #frontPageSlider li {width:696px;overflow:hidden;}
#frontPageSlider ul li, #frontPageSlider, #container {
width:100%;
}
.nextBtn {
left: 960px;
}
.textSlide {
position:relative;
background:#ffffff;
min-height: 300px;
}
.textSlide li {
overflow: visible ;
list-style: disc ;
display: list-item ;
margin-left:20px ;
margin-bottom: 5px ;
font-size: 1.4em ;
font-weight: lighter;
color: #555 ;
width: auto ;
}
.customlink {
cursor: pointer;
}
.slideContainer {
width: 960px;
margin: 0 auto;
position:relative;
}
/*Demo slider*/
#demoslider ul, #demoslider li{position:relative;margin:0;padding:0;list-style:none ;display:block;}
#demoslider li {margin: 0 ;}
#demoslider li , #demoslider img{width:570px;overflow:hidden;height:197px;}
#demoslider {width:570px;overflow:hidden; }
#demoslider img {border:none;}
#slidercontainer {margin:0 auto;width:570px;position:relative;}
.prevBtn, .nextBtn{margin:0;padding:0;display:block;overflow:hidden;text-indent:-8000px;display:block;width:30px;height:77px;position:absolute;left:-30px;top:121px;z-index:1000;background:url(http://webbies.dk/assets/files/SudoSlider/package/images/btn_prev.gif) no-repeat 0 0;cursor:pointer;}
.nextBtn{ background:url(http://webbies.dk/assets/files/SudoSlider/package/images/btn_next.gif) no-repeat 0 0;}
#slidercontainer .nextBtn {left:570px; !important}
</style>
<script>
$(document).ready(function(){
// The main slider
(function () {
// The video on slide 3.
var dubstebVideoPlayer = loadVideo('dubstebVideo', 'hDlif8Km4S4', true);
var oldSlide = 0;
var frontPageSlider = $("#frontPageSlider").sudoSlider({
effect: "boxRainGrowInDownRight",
boxrows : 4,
boxcols : 10,
responsive: true,
customlink: ".customlink",
history: true,
updatebefore: true,
numerictext: ["home", "download", "video", "donate", "demo"],
speed: 1700,
prevNext: false,
afteranimation: function (slide) {
if (slide == 3) {
dubstebVideoPlayer.playVideo();
}
oldSlide = slide;
},
beforeanimation: function () {
if (oldSlide == 3) {
dubstebVideoPlayer.pauseVideo();
}
}
});
// Stealing the donate links.
$(".donateLink").click(function () {
frontPageSlider.goToSlide(4);
return false;
})
})();
// The demo slider
(function () {
// The demo slider, thats inside the main slider. (Could just as well be initialized before the main slider).
$("#demoslider").sudoSlider({
continuous:true,
ajax: [
'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/01.jpg',
'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/02.jpg',
'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/03.jpg',
'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/04.jpg',
'http://webbies.dk/assets/templates/SudoSlider/images/demoimages/05.jpg'
],
effect: demoSliderEffect
});
var sliderEffects = $.fn.sudoSlider.effects;
var effectsDropDown = $("#demoSliderEffects");
$.each(sliderEffects, function (name, effect){
effectsDropDown.append("<option value=\"" + name + "\">" + name + "</option>")
});
function demoSliderEffect(obj) {
return sliderEffects[effectsDropDown.val()](obj);
}
})();
// Wrap the content of the slides inside a container, to limit the width.
$(".textSlide").each(function () {
var that = $(this);
var children = that.children();
var wrappingElement = $("<div class='slideContainer'></div>");
that.append(wrappingElement);
wrappingElement.append(children);
});
// 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
}
});
}
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">
<div style="position: relative;">
<div id="frontPageSlider">
<ul>
<li class="textSlide" style="background: #f2f2f2" data-effect="sliceRevealDown">
<div style="margin-top:7px;margin-left:10px;width:500px;">
<h1 style="font-size: 30px;">Why use SudoSlider?</h1>
<ul>
<li>It can be <a href="http://webbies.dk/assets/files/SudoSlider/package/demos/responsive.html">responsive</a></li>
<li>Can contain <span style="color:darkgreen">ANY</span> HTML</li>
<li><a href="javascript:void(0);" class="customlink" data-target="5">Lots of animations</a></li>
<li>Can <a href="http://webbies.dk/assets/files/SudoSlider/package/demos/ajax.html">load AJAX content</a></li>
<li>Supports IE6+, Chrome, Firefox etc.</li>
<li>Callbacks and methods for developers</li>
<li><a href="http://webbies.dk/SudoSlider/demos.html">A pack of demos to get started</a></li>
</ul>
</div>
<h1 style="position:absolute;top:65px;right:50px;font-size:70px;font-weight: bold;" data-target="2" class="customlink"><a href="javascript:void(0)">Press me</a></h1>
<div style="position:absolute;bottom:10px;right:20px;">
<a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip" style="float:left;">
<img src="http://webbies.dk/assets/templates/SudoSlider/images/download_box.png" alt="image description" width="64" height="64"/>
</a>
<div style="float:left;">
<h1 style="font-size: 40px;position:relative;top:20px;">
<a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip">
Download
</a>
</h1>
</div>
</div>
</li>
<li class="textSlide">
<a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip">
<img src="http://webbies.dk/assets/templates/SudoSlider/images/download_box.png" alt="image description"/>
</a>
<div style="position:absolute;left:256px;top:115px;">
<h1 style="font-size: 40px;">
<a href="http://webbies.dk/assets/files/SudoSlider/SudoSlider.zip">
Download
</a>
</h1>
</div>
<h1 style="position:absolute;top:120px;right:50px;font-size:27px;font-weight: bold;" data-target="3" class="customlink"><a href="javascript:void(0);">See a video in the slider →</a></h1>
<h2 style="position:absolute;left:310px;top:200px;">Press the back button in the browser to go back</h2>
</li>
<li class="textSlide" data-effect="slide" data-speed="700" style="height:315px;background: #f0f0f0">
<div style="position:absolute;top:40px;left:10px;">
<h1 style="font-size: 30px">
<a href="javascript:void(0)" data-target="2" class="customlink">← Back to download</a><br/>
<span style="font-size: 15px;">(Or press the back button in the browser)</span>
</h1>
<h2>See other examples of <br />what's possible in <a href="http://webbies.dk/SudoSlider/demos.html">the demos</a></h2>
</div>
<div style="position:absolute;top:0;right:0;">
<div id="dubstebVideo"></div>
</div>
</li>
<li class="textSlide donate" data-effect="blinds1Down" data-speed="700">
<div style="margin-top:20px;margin-left:40px;">
<h2 style="font-size:300%;">Help me, <span class="orange">donate!</span></h2>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<label>$</label><input type="text" name="amount" class="amount" value="5">
<input type="submit" name="submit" value="Donate Now" class="submit">
<script language="JavaScript" type="text/JavaScript"> <!--
if (document.images) {
preload_billede = new Image();
preload_billede.src = "http://webbies.dk/assets/templates/SudoSlider/images/donate_hover.png";
}
//-->
</script>
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="item_name" value="Webbies">
<input type="hidden" name="item_number" value="Donate to the Sudo Slider project">
<input type="hidden" name="business" value="erik1002@gmail.com">
<input type="hidden" name="return" value="http://webbies.dk/SudoSlider/index.php?id=54">
</form>
</div>
<div style="position:absolute;top:0px;left:340px;">
<img src="http://webbies.dk/assets/templates/SudoSlider/images/coffee.png" />
</div>
</li>
<li class="textSlide" data-effect="boxRainFlyOutDownRight">
<div id="slidercontainer" style="margin-top:10px;">
<div class="center"><h2>Effects explorer</h2></div>
<div class="center"><h3 style="display:inline;">Select effect </h3> <select id="demoSliderEffects"></select></div>
<div id="demoslider"></div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</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>
<style>
/* Donate */
.donate label {color: #666;font: normal normal bold 43px/normal 'helvetica neue', Helvetica, Calibri, 'Bitstream Vera', arial, sans-serif;line-height: 1;margin: 0px;padding: 0px;vertical-align: bottom;}
.donate input.amount {color: #222;font: normal normal bold 28px/normal 'helvetica neue', Helvetica, Calibri, 'Bitstream Vera', arial, sans-serif;height: 37px;margin-left: 10px;padding: 3px 5px 0px 0px;text-align: right;width: 258px;border-color: #DDD;borde-radius:4px;background: #FAFAFA;border: 1px solid #999;}
.donate input.submit {background: transparent url(http://webbies.dk/assets/templates/SudoSlider/images/donate.png) no-repeat;border: 0px;color: #333;display: block;font-size: 0px;height: 80px;line-height: 0;margin-top: 10px;text-indent: -9999px;width: 300px;border-color: #DDD;border-radius:4px;cursor:pointer;}
.donate input.submit:hover {background: transparent url(http://webbies.dk/assets/templates/SudoSlider/images/donate_hover.png);}
</style>
<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>