jQuery slideshow at MediaTemple

Question

I want to do a slideshow for product something like http://www.mediatemple.net home page, where there with those big dots on the right. Tried to google but couldn't find one similar.

Answer 1

Try the jQuery Cycle plugin: http://jquery.malsup.com/cycle/

Answer 2

Their code is directly in the page. A little investigation in the css should lead you in the right direction.

$(document).ready(function() {

  var nrgtiles = $('div[class^=homesplash]').length;

/*   alert(nrgtiles); */

  $('body').append('<div id="nrgrotate">&nbsp;</div>');

  var i=1;

  while (i<=nrgtiles) {

    $('#nrgrotate').append('<a href="#"><em>&nbsp;</em></a>');

  i++;
  }

  $('#nrgrotate a:eq(0)').addClass('active');

  $('#nrgrotate a:eq(0)').click(function() {

    homeFadeOut();

    return false;

  });

  $('#nrgrotate a:eq(1)').click(function() {

    homeFadeIn();

    return false;

  });

  $('.homesplash2').hide();

  timer = setTimeout(homeFadeIn, 10000);

});

function homeFadeIn() {

  clearTimeout(timer);

  $('#nrgrotate a:eq(0)').removeClass('active');
  $('#nrgrotate a:eq(1)').addClass('active');

  $('.homesplash2').fadeIn(1000, function() {

    timer = setTimeout(homeFadeOut, 10000);

  });

}

function homeFadeOut() {

  clearTimeout(timer);

  $('#nrgrotate a:eq(1)').removeClass('active');
  $('#nrgrotate a:eq(0)').addClass('active');

  $('.homesplash2').css('margin-top', '-263px').fadeOut(1000, function() {

    timer = setTimeout(homeFadeIn, 10000);

  });

}