jquery messy slider
jquery messy slider
hey, i've taken the slider from
http://graphpaperpress.com/2009/03/15/j ... wordpress/
and reduced it to my needs and being a designer i fear that the code is everything but perfect now. Maybe you guys are looking for something similar and want to help clean up the mess?
The code is:
-
$(function() {
var totalPanels = $(".scrollContainer").children().size();
var regWidth = $(".panel").css("width");
var regImgWidth = $(".panel img").css("width");
var movingDistance = 300;
var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');
$("#slider").data("currentlyMoving", false);
$container
.css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
.css('left', "0");
var scroll = $('#slider .scroll').css('overflow', 'hidden');
function returnToNormal(element) {
$(element)
.find("img")
.end()
};
//direction true = right, false = left
function change(direction) {
//if not at the first or last panel
if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 4))) { return false; }
//if not currently moving
if (($("#slider").data("currentlyMoving") == false)) {
$("#slider").data("currentlyMoving", true);
var next = direction ? curPanel + 1 : curPanel - 1;
var leftValue = $(".scrollContainer").css("left");
var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
$(".scrollContainer")
.stop()
.animate({
"left": movement
}, function() {
$("#slider").data("currentlyMoving", false);
});
curPanel = next;
//remove all previous bound functions
$("#panel_"+(curPanel+1)).unbind();
//go forward
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
//remove all previous bound functions
$("#panel_"+(curPanel-1)).unbind();
//go back
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//remove all previous bound functions
$("#panel_"+curPanel).unbind();
}
}
// Set up "Current" panel and next and prev
returnToNormal("#panel_3");
var curPanel = 5;
$("#panel_"+(curPanel+1)).click(function(){ change(true); });
$("#panel_"+(curPanel-1)).click(function(){ change(false); });
//when the left/right arrows are clicked
$(".right").click(function(){ change(true); });
$(".left").click(function(){ change(false); });
$(window).keydown(function(event){
switch (event.keyCode) {
case 13: //enter
$(".right").click();
break;
case 32: //space
$(".right").click();
break;
case 37: //left arrow
$(".left").click();
break;
case 39: //right arrow
$(".right").click();
break;
}
});
});
Check out what it does here:
http://decojardin.info/florida/
Basically I don't need any of the resize functions anymore and I'm sure there are tons of other leftovers that the script doesn't need anymore.
Also, is there a way to build something like this, where the slider would center the image of the current post?
Or am I just plain stupid to customize this script because there already is something out there that does exactly what i want?