sudoslider
Version:
An extremely versitile content-slider
201 lines (186 loc) • 7.99 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sudo Slider | Thumbnails 2</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 ajaximages = [
'../images/01.jpg',
'../images/02.jpg',
'../images/03.jpg',
'../images/04.jpg',
'../images/05.jpg'
];
var imagestext = [
'Just another beautiful sunset',
'Behind another beautiful sunset',
'Mountains in the Alps',
'Road and mountains in the Alps',
'A goat in norway'
];
var totalSlides = ajaximages.length;
$(document).ready(function () {
// Initializing.
var mainSlider = $("#slider").sudoSlider({
continuous: true,
preloadajax: true,
effect: "fade",
controlsFade: false,
ajax: ajaximages,
ajaxLoad: function (t) {
// Caption.
$(this).css("position", "relative").append('<div class="caption" >' + imagestext[t - 1] + '</div>');
},
beforeAnimation: function (t) {
// Caption
$(this).children('.caption').hide();
// Thumbnails fade to which is current.
var allSlides = controlsSlider.children().children();
var currentThumbnail = controlsSlider.getSlide(t).add(controlsSlider.getSlide(t + totalSlides)).add(controlsSlider.getSlide(t + 2 * totalSlides));
allSlides.not(currentThumbnail).fadeTo(400, 0.5);
currentThumbnail.fadeTo(400, 1);
var dir = (t - 1) + totalSlides;
var currentSlide = controlsSlider.getValue("currentSlide");
var diff = -currentSlide + dir;
var targetSlide = dir;
var newDiff = -currentSlide + dir + totalSlides;
if (Math.abs(newDiff) < Math.abs(diff)) {
targetSlide = dir + totalSlides;
diff = newDiff;
}
newDiff = -currentSlide + dir - totalSlides;
if (Math.abs(newDiff) < Math.abs(diff)) {
targetSlide = dir - totalSlides;
}
controlsSlider.goToSlide(targetSlide);
},
afterAnimation: function (t) {
// Caption.
$(this).children('.caption').slideDown(400);
}
});
// The controls slider
var controlsSlider = $("#sliderControls").sudoSlider({
ajax: ajaximages.concat(ajaximages).concat(ajaximages),
prevNext: false,
slideCount: 4,
moveCount: 2,
startSlide: totalSlides,
continuous: true,
customLink: "#sliderControlsContainer .controls a",
ajaxLoad: function (t) {
// Width to height ratio.
$img = $(this).find('img');
var height = $img.height("auto").height();
var width = $img.width("auto").width();
var widthToHeight = width / height;
// Width of slider is 696. I use 7 px of spacing between each thumbnail. And i have 4 thumbnails.
var thumbNailWidth = (696 - 7 * 3) / 4;
var thumbNailHeight = thumbNailWidth / widthToHeight;
$img.width(thumbNailWidth).height(thumbNailHeight);
controlsSlider.adjust();
$img.attr("data-target", t);
// I got some CSS that makes sure that the image is only shown, when the class loaded is added.
$img.addClass("loaded");
// Making sure all thumbnails are faded except the current one.
if (t % totalSlides != mainSlider.getValue("currentSlide")) {
controlsSlider.getSlide(t).fadeTo(0, 0.5);
}
},
afterAnimation: function (t) {
if (t <= totalSlides) {
controlsSlider.goToSlide(t+totalSlides, 0);
} else if (t > 2 * totalSlides) {
controlsSlider.goToSlide(t-totalSlides, 0);
}
}
});
// Making the thumbnails do something.
$("#sliderControls").on("click", "img", function () {
var slide = $(this).attr("data-target");
mainSlider.goToSlide(Number(slide) % totalSlides);
});
});
});
</script>
<style>
.caption {
position:absolute;
bottom:0;
left:0;
width:696px;
height:25px;
text-align:center;
color: #000000;
background: #ffffff;
background:transparent;
background:rgba(255,255,255,0.7);
/* Getting a semi-transparent background in IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff);
zoom: 1;
}
#sliderControls {
margin-top:10px;
}
#sliderControls img{
border:none;margin: 0 7px 0 0;cursor:pointer;
}
#sliderControls img:not(.loaded) {
opacity: 0.001;
height:10px;
}
#sliderControlsContainer .controls a {
top: -10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Sudo Slider jQuery Plugin - Thumbnails 2</h1>
<div style="position:relative;">
<div style="position: relative;">
<div id="slider"></div>
</div>
<div id="sliderControlsContainer" style="position: relative;">
<div id="sliderControls"></div>
<span class="controls">
<a href="javascript:void(0);" data-target="prev" class="prevBtn"></a>
<a href="javascript:void(0);" data-target="next" class="nextBtn"></a>
</span>
</div>
</div>
<h3>Usage</h3>
<h4>See the source code.</h4>
</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>