Created
May 9, 2012 16:15
-
-
Save johnkoht/2646092 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
var topspeed = 1; | |
var midspeed = 1; | |
var bgspeed = 1; | |
var bgfactor = .1; | |
var distanceFactor = 1.2; | |
var useDistance = true; | |
if (!$.browser.webkit) { | |
topspeed = bgspeed / 2; | |
midspeed = midspeed / 2; | |
distanceFactor = 1; | |
useDistance = false; | |
} | |
var topsize = 0; | |
var midsize = 0; | |
var bgsize = 0; | |
var current_item; | |
// Wait until all the images are loaded | |
$('.slider_container').waitForImages(function(e) { | |
$('.slider').css('opacity', '1'); | |
bind_navigation(); | |
$("a.startpos").trigger("click"); | |
}); | |
// Bind to window resizes | |
$(window).bind("resize",function() { | |
topsize = $("#top").width(); | |
midsize = $("#mid").width(); | |
bgsize = $("#bg").width(); | |
$(".trackslider_item.active").trigger('click', "resized"); | |
}).trigger("resize"); | |
// Bind the navigation icons the slider | |
function bind_navigation() { | |
// Animate/slide the carousel | |
$(".trackslider_item").bind("click", function(e, etype) { | |
e.preventDefault(); | |
$(".slider_content").stop().fadeOut('slow'); | |
$(".trackslider_item").removeClass("active"); | |
$(this).addClass("active"); | |
current_item = $(this).attr('data-id'); | |
var xpos = $(this).attr("data-xpos"); | |
var newpos = (-xpos + (midsize / 2)); | |
var oldxpos = $("#mid").css("background-position-x").split(" ")[0]; | |
var oldpos = parseInt(oldxpos.replace(/[^0-9-]/g, "")); | |
var distance = Math.abs(oldpos - newpos); | |
animate_carousel($(this), xpos, newpos, oldpos, distance, etype); | |
}); | |
$('.carousel_arrow, .slider_arrow_nav').bind('click', function(e) { | |
e.preventDefault(); | |
if ( $(this).hasClass('inactive') ) return false; | |
var direction = $(this).attr('data-direction'); | |
arrow_handler(direction); | |
}) | |
} | |
function arrow_handler(direction) { | |
if (direction == 'left' && current_item > 0) { | |
current_item--; | |
} | |
else if (direction == "right" && current_item < 6) { | |
current_item++; | |
} | |
// Check if they are inactive/active | |
current_item == 0 ? $('.left_arrow').addClass('inactive') : $('.left_arrow').removeClass('inactive') | |
current_item == 6 ? $('.right_arrow').addClass('inactive') : $('.right_arrow').removeClass('inactive') | |
$('a[data-id="'+current_item+'"]').trigger("click"); | |
} | |
// Animate the carousel | |
function animate_carousel(item, xpos, newpos, oldpos, distance, etype) { | |
$('#mid').stop().animate({ | |
backgroundPosition: newpos + ' 0' | |
}, midspeed * (useDistance ? distance : 1000) / (distanceFactor), 'easeOutCubic', function() { | |
if (etype != "resized") { | |
$($(item).attr("data-content")).fadeIn('slow'); | |
} | |
}); | |
$('#bg').stop().animate({ | |
backgroundPosition: (newpos * bgfactor) + ' 0' | |
}, bgspeed * (useDistance ? distance : 1000), 'swing'); | |
} | |
}); | |
(function($) { | |
if(!document.defaultView || !document.defaultView.getComputedStyle){ | |
var oldCurCSS = jQuery.curCSS; | |
jQuery.curCSS = function(elem, name, force){ | |
if(name === 'background-position-x'){ | |
name = 'backgroundPosition'; | |
} | |
if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){ | |
return oldCurCSS.apply(this, arguments); | |
} | |
var style = elem.style; | |
if ( !force && style && style[ name ] ){ | |
return style[ name ]; | |
} | |
return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force); | |
}; | |
} | |
var oldAnim = $.fn.animate; | |
$.fn.animate = function(prop){ | |
if('background-position-x' in prop){ | |
prop.backgroundPosition = prop['background-position-x']; | |
delete prop['background-position-x']; | |
} | |
if('backgroundPosition' in prop){ | |
prop.backgroundPosition = '('+ prop.backgroundPosition + ')'; | |
} | |
return oldAnim.apply(this, arguments); | |
}; | |
function toArray(strg){ | |
strg = strg.replace(/left|top/g,'0px'); | |
strg = strg.replace(/right|bottom/g,'100%'); | |
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); | |
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); | |
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; | |
} | |
$.fx.step.backgroundPosition = function(fx) { | |
if (!fx.bgPosReady) { | |
var start = $.curCSS(fx.elem,'backgroundPosition'); | |
if(!start){//FF2 no inline-style fallback | |
start = '0px 0px'; | |
} | |
start = toArray(start); | |
fx.start = [start[0],start[2]]; | |
var end = toArray(fx.end); | |
fx.end = [end[0],end[2]]; | |
fx.unit = [end[1],end[3]]; | |
fx.bgPosReady = true; | |
} | |
var nowPosX = []; | |
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; | |
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; | |
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment