/** * jQuery.ScrollTo * Copyright (c) 2008 Ariel Flesler - aflesler(at)gmail(dot)com | http: * Dual licensed under the MIT (http: * and GPL (http: * Date: 2/19/2008 * * @projectDescription Easy element scrolling using jQuery. * Tested with jQuery 1.2.1. On FF 2.0.0.11, IE 6, Opera 9.22 and Safari 3 beta. on Windows. * * @author Ariel Flesler * @version 1.3.3 * * @id jQuery.scrollTo * @id jQuery.fn.scrollTo * @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements. * The different options for target are: * - A number position (will be applied to all axes). * - A string position ('44', '100px', '+=90', etc ) will be applied to all axes * - A jQuery/DOM element ( logically, child of the element to scroll ) * - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc ) * - A hash { top:x, left:y }, x and y can be any kind of number/string like above. * @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead. * @param {Object} settings Hash of settings, optional. * @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'. * @option {Number} duration The OVERALL length of the animation. * @option {String} easing The easing method for the animation. * @option {Boolean} margin If true, the margin of the target element will be deducted from the final position. * @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }. * @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes. * @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends. * @option {Function} onAfter Function to be called after the scrolling ends. * @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends. * @return {jQuery} Returns the same jQuery object, for chaining. * * @example $('div').scrollTo( 340 ); * * @example $('div').scrollTo( '+=340px', { axis:'y' } ); * * @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } ); * * @example var second_child = document.getElementById('container').firstChild.nextSibling; * $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){ * alert('scrolled!!'); * }}); * * @example $('div').scrollTo( { top: 300, left:'+=200' }, { offset:-20 } ); * * Notes: * - jQuery.scrollTo will make the whole window scroll, it accepts the same arguments as jQuery.fn.scrollTo. * - If you are interested in animated anchor navigation, check http: * - The options margin, offset and over are ignored, if the target is not a jQuery object or a DOM element. * - The option 'queue' won't be taken into account, if only 1 axis is given. */ ;(function( $ ){ var $scrollTo = $.scrollTo = function( target, duration, settings ){ $scrollTo.window().scrollTo( target, duration, settings ); }; $scrollTo.defaults = { axis:'y', duration:1 }; $scrollTo.window = function(){ return $( $.browser.safari ? 'body' : 'html' ); }; $.fn.scrollTo = function( target, duration, settings ){ if( typeof duration == 'object' ){ settings = duration; duration = 0; } settings = $.extend( {}, $scrollTo.defaults, settings ); duration = duration || settings.speed || settings.duration; settings.queue = settings.queue && settings.axis.length > 1; if( settings.queue ) duration /= 2; settings.offset = both( settings.offset ); settings.over = both( settings.over ); return this.each(function(){ var elem = this, $elem = $(elem), t = target, toff, attr = {}, win = $elem.is('html,body'); switch( typeof t ){ case 'number': case 'string': if( /^([+-]=)?\d+(px)?$/.test(t) ){ t = both( t ); break; } t = $(t,this); case 'object': if( t.is || t.style ) toff = (t = $(t)).offset(); } $.each( settings.axis.split(''), function( i, axis ){ var Pos = axis == 'x' ? 'Left' : 'Top', pos = Pos.toLowerCase(), key = 'scroll' + Pos, act = elem[key], Dim = axis == 'x' ? 'Width' : 'Height', dim = Dim.toLowerCase(); if( toff ){ attr[key] = toff[pos] + ( win ? 0 : act - $elem.offset()[pos] ); if( settings.margin ){ attr[key] -= parseInt(t.css('margin'+Pos)) || 0; attr[key] -= parseInt(t.css('border'+Pos+'Width')) || 0; } attr[key] += settings.offset[pos] || 0; if( settings.over[pos] ) attr[key] += t[dim]() * settings.over[pos]; }else attr[key] = t[pos]; if( /^\d+$/.test(attr[key]) ) attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) ); if( !i && settings.queue ){ if( act != attr[key] ) animate( settings.onAfterFirst ); delete attr[key]; } }); animate( settings.onAfter ); function animate( callback ){ $elem.animate( attr, duration, settings.easing, callback && function(){ callback.call(this, target); }); }; function max( Dim ){ var el = win ? $.browser.opera ? document.body : document.documentElement : elem; return el['scroll'+Dim] - el['client'+Dim]; }; }); }; function both( val ){ return typeof val == 'object' ? val : { top:val, left:val }; }; })( jQuery ); /********************/ /** * jQuery.serialScroll * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http: * Dual licensed under MIT and GPL. * Date: 3/20/2008 * * @projectDescription Animated scrolling of series. * @author Ariel Flesler * @version 1.2.1 * * @id jQuery.serialScroll * @id jQuery.fn.serialScroll * @param {Object} settings Hash of settings, it is passed in to jQuery.ScrollTo, none is required. * @return {jQuery} Returns the same jQuery object, for chaining. * * http: * * Notes: * - The plugin requires jQuery.ScrollTo. * - The hash of settings, is passed to jQuery.ScrollTo, so its settings can be used as well. */ ;(function( $ ){ var $serialScroll = $.serialScroll = function( settings ){ $.scrollTo.window().serialScroll( settings ); }; $serialScroll.defaults = { duration:1000, axis:'x', event:'click', start:0, step:1, lock:true, cycle:true, constant:true /* navigation:null, target:null, interval:2000, lazy:false, stop:false, force:false, jump: false, items:null, prev:null, next:null, onBefore: function(){}, exclude:0 */ }; $.fn.serialScroll = function( settings ){ settings = $.extend( {}, $serialScroll.defaults, settings ); var event = settings.event, step = settings.step, lazy = settings.lazy; return this.each(function(){ var context = settings.target ? this : document, $pane = $(settings.target || this, context), pane = $pane[0], items = settings.items, active = settings.start, auto = settings.interval, nav = settings.navigation, timer; if( !lazy ) items = getItems(); if( settings.force ) jump( {}, active ); $(settings.prev||[], context).bind( event, -step, move ); $(settings.next||[], context).bind( event, step, move ); if( !pane.ssbound ) $pane .bind('prev.serialScroll', -step, move ) .bind('next.serialScroll', step, move ) .bind('goto.serialScroll', jump ); if( auto ) { $pane .bind('start.serialScroll', function(e){ if( !auto ){ clear(); auto = true; next(); } }) .bind('stop.serialScroll', function(){ clear(); auto = false; }); timer = setTimeout( next, settings.interval );} $pane.bind('notify.serialScroll', function(e, elem){ var i = index(elem); if( i > -1 ) active = i; }); pane.ssbound = true; if( settings.jump ) (lazy ? $pane : getItems()).bind( event, function( e ){ jump( e, index(e.target) ); }); if( nav ) nav = $(nav, context).bind(event, function( e ){ e.data = Math.round(getItems().length / nav.length) * nav.index(this); jump( e, this ); }); function move( e ){ e.data += active; jump( e, this ); }; function jump( e, button ){ if( !isNaN(button) ){ e.data = button; button = pane; } var pos = e.data, n, real = e.type, $items = settings.exclude ? getItems().slice(0,-settings.exclude) : getItems(), limit = $items.length, elem = $items[pos], duration = settings.duration; if( real ) e.preventDefault(); if( auto ){ clear(); timer = setTimeout( next, settings.interval ); } if( !elem ){ n = pos < 0 ? 0 : limit - 1; if( active != n ) pos = n; else if( !settings.cycle ) return; else pos = limit - n - 1; elem = $items[pos]; } if( !elem || real && active == pos || settings.lock && $pane.is(':animated') || real && settings.onBefore && settings.onBefore.call(button, e, elem, $pane, getItems(), pos) === false ) return; if( settings.stop ) $pane.queue('fx',[]).stop(); if( settings.constant ) duration = Math.abs(duration/step * (active - pos )); $pane .scrollTo( elem, duration, settings ) .trigger('notify.serialScroll',[pos]); }; function next(){ $pane.trigger('next.serialScroll'); }; function clear(){ clearTimeout(timer); }; function getItems(){ return $( items, pane ); }; function index( elem ){ if( !isNaN(elem) ) return elem; var $items = getItems(), i; while(( i = $items.index(elem)) == -1 && elem != pane ) elem = elem.parentNode; return i; }; }); }; })( jQuery ); /** * jQuery.LocalScroll * Copyright (c) 2007-2008 Ariel Flesler - aflesler(at)gmail(dot)com | http: * Dual licensed under MIT and GPL. * Date: 3/10/2008 * * @projectDescription Animated scrolling navigation, using anchors. * http: * @author Ariel Flesler * @version 1.2.5 * * @id jQuery.fn.localScroll * @param {Object} settings Hash of settings, it is passed in to jQuery.ScrollTo, none is required. * @return {jQuery} Returns the same jQuery object, for chaining. * * @example $('ul.links').localScroll(); * * @example $('ul.links').localScroll({ filter:'.animated', duration:400, axis:'x' }); * * @example $.localScroll({ target:'#pane', axis:'xy', queue:true, event:'mouseover' }); * * Notes: * - The plugin requires jQuery.ScrollTo. * - The hash of settings, is passed to jQuery.ScrollTo, so the settings are valid for that plugin as well. * - jQuery.localScroll can be used if the desired links, are all over the document, it accepts the same settings. * - If the setting 'lazy' is set to true, then the binding will still work for later added anchors. * - The setting 'speed' is deprecated, use 'duration' instead. * - If onBefore returns false, the event is ignored. **/ ;(function( $ ){ var URI = location.href.replace(/#.*/,''); var $localScroll = $.localScroll = function( settings ){ $('body').localScroll( settings ); }; $localScroll.defaults = { duration:1000, axis:'y', event:'click', stop:true /* lock:false, lazy:false, target:null, filter:null, hash: false */ }; $localScroll.hash = function( settings ){ settings = $.extend( {}, $localScroll.defaults, settings ); settings.hash = false; if( location.hash ) setTimeout(function(){ scroll( 0, location, settings ); }, 0 ); }; $.fn.localScroll = function( settings ){ settings = $.extend( {}, $localScroll.defaults, settings ); return ( settings.persistent || settings.lazy ) ? this.bind( settings.event, function( e ){ var a = $([e.target, e.target.parentNode]).filter(filter)[0]; a && scroll( e, a, settings ); }) : this.find('a') .filter( filter ).bind( settings.event, function(e){ scroll( e, this, settings ); }).end() .end(); function filter(){ return !!this.href && !!this.hash && this.href.replace(this.hash,'') == URI && (!settings.filter || $(this).is( settings.filter )); }; }; function scroll( e, link, settings ){ var id = link.hash.slice(1), elem = document.getElementById(id) || document.getElementsByName(id)[0]; if ( elem ){ e && e.preventDefault(); var $target = $( settings.target || $.scrollTo.window() ); if( settings.lock && $target.is(':animated') || settings.onBefore && settings.onBefore.call(link, e, elem, $target) === false ) return; if( settings.stop ) $target.queue('fx',[]).stop(); $target .scrollTo( elem, settings ) .trigger('notify.serialScroll',[elem]); if( settings.hash ) $target.queue(function(){ location = link.hash; }); } }; })( jQuery ); $(document).ready(function () { var $panels = $('#slider .scrollContainer > div'); var $container = $('#slider .scrollContainer'); var horizontal = true; if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' }); $container.css('width', $panels[0].offsetWidth * $panels.length); } var $scroll = $('#slider .scroll').css('overflow', 'hidden'); $scroll .before('<img class="scrollButtons left" src="images/scroll_left.png" />') .after('<img class="scrollButtons right" src="images/scroll_right.png" />'); function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('#slider .navigation').find('a').click(selectNav); function trigger(data) { var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash }); } else { $('ul.navigation a:first').click(); } var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, items: $panels, navigation: '.navigation a', prev: 'img.left', next: 'img.right', axis: 'xy', onAfter: trigger, offset: offset, interval: 0, event: 'mouseover', duration: 500, easing: 'swing' }; $('#slider').serialScroll(scrollOptions); $.localScroll(scrollOptions); scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); });<!--/* 8273:23.9% ~ 0.011 */-->