/* slider.js Provide horizontal scrolling behavior to carousel-type promotion items. :AUTHOR: Remy Sharp, www.jqueryfordesigners.com Adapted for Dominion by John Daniel, James Green :CREATED: August 1, 2008 :UPDATED: JD 08/01/2008 - Initial setup. JG 08/21/2008 - Added support for png24 format in IE. Added fade effect to left and right side of carousel. JG 08/28/2008 - Animation added to items in carousel. :DEPENDENCIES: /lib/jquery.1.2.6.js /lib/jquery.ifixpng2.js /lib//ui-1.6/ui.core.js /lib//ui-1.6/ui.slider.js */ $(window).ready(function () { // Add png24 support in IE. $('#left-curtain').ifixpng(); $('#right-curtain').ifixpng(); var s; // Hide the carousel content until it reaches its starting position. $('div.slider-gallery ul').css("visibility","hidden"); // Build the slider control. $('div.slider-gallery').each(function () { var ul = $('ul', this); var li = $('li', ul); /* Sets the ul width as necessary */ ul.width(li.size() * li.width()); var visibleItems = 3; var items = li.size(); var itemsWidth = ul.innerWidth() - $(this).outerWidth(); var viewable = (li.width() * visibleItems) - itemsWidth; var delay = 2000; // 2 seconds var maxDelay = 5000; // 5 seconds var delayIncr = 500; // .5 seconds if (items>visibleItems+1) { // Increase delay by one half second for each item over 4. delay+=(items-(visibleItems+1))*delayIncr; if (delay>maxDelay) { delay = maxDelay; } } s = $('.slider', this).slider({ handle: '.handle', min: 0, max: itemsWidth, startValue: itemsWidth/2, slide: function (ev, ui) { ul.css('left', '-' + ui.value + 'px'); $('div.slider-gallery .bubble').hide(); }, stop: function (ev, ui) { ul.animate({ 'left' : '-' + ui.value + 'px' }, 'slow', 'swing'); } }); // Find the middle position of the content. var startPos = -(itemsWidth/2); // Move the content it's starting position. ul.css("left", startPos + "px"); // Show the content. $('div.slider-gallery ul').css("visibility","visible"); // Move content to the right and stop on the first item in carousel. //$('div.slider-gallery ul').animate({left:0}, 2000); $('div.slider-gallery ul').animate({left:0}, 2000, function() { $('div.slider-gallery .bubble').show(); }); // Coordinate the movement of the handle with the content. $('.handle').animate({left:0}, 2000); $("img#left-button").click(function() { var step = "-=" + (itemsWidth/items); s.slider("moveTo", step); }); }); });