sudoslider
Version:
An extremely versitile content-slider
115 lines (107 loc) • 5.19 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sudo Slider | Make your own effect</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 type="text/javascript">
$(document).ready(function(){
var callObject;
// This is the animation code. This one is really simple.
// You HAVE to call obj.callback() when you are done, and only when you are completely done.
var ownEffect = function (obj) {
callObject = obj;
// Diff is the number of slides we are moving, negative if we are moving to the left.
var overlay = $("<div class=\"sudo-box\" style=\"position:absolute;top:0;left:0;z-index:10000;opacity: 1 !important;\">THIS WILL BE REMOVED IN STOP FUNCTION!</div>");
obj.slider.prepend(overlay);
if (obj.diff < 0) {
// Make sure that everything you make in order to perform the animation is marked with the class "sudo-box".
// Otherwise SudoSlider might count it as a slide.
// Things marked with the class sudo-box will also be automaticly removed by the default stop() function.
obj.slider.fadeTo(2000, 0.5, function () {
obj.callback();
});
} else {
// goToNext will make sure that the slider goes to the next slide immediately, you can then finish the effect.
// When doing this you would usually have a clone of the content on top of the slider.
obj.slider.fadeTo(500, 0.001, function () {
obj.goToNext();
obj.slider.fadeTo(500, 1, function () {
obj.callback();
});;
});
overlay.hide().show(1000);
}
}
// When the slider needs to stop the animation, it will call this "sub-function".
// If this is defined, it will always run when obj.callback() is called.
// Or when the slider needs to stop the animation (that only happens the slider is being destroyed or the window is resized and responsive is on)
// If not defined a default stop() animation will run, this is the "defaultStopFunction" in the main script.
// The top function can also be specified by adding it as the property "stop" to the obj given in the effect.
ownEffect.stop = function () {
var slider = callObject.slider;
$(".sudo-box", slider).remove();
slider.fadeTo(0, 1);
slider.stop();
}
// And then just specify the function as the effect.
var sudoSlider = $("#slider").sudoSlider({
effect: ownEffect,
continuous:true,
responsive: true,
prevNext: false,
numeric: true
});
});
</script>
<style>
#container, #slider {width: auto; max-width: 1200px;}
#slider, #slider li img {width: 100%;}
</style>
</head>
<body>
<div id="container">
<h1>Sudo Slider jQuery Plugin - Make your own effect</h1>
<div style="position:relative;">
<div id="slider">
<ul>
<li><img src="../images/01.jpg" alt="image description"/></li>
<li><img src="../images/02.jpg" alt="image description"/></li>
<li><img src="../images/03.jpg" alt="image description"/></li>
<li><img src="../images/04.jpg" alt="image description"/></li>
<li><img src="../images/05.jpg" alt="image description"/></li>
</ul>
</div>
</div>
<h3>Usage: See the source code, and read the comments</h3>
</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>