gistfile1.js

<div id="slideshow">
  <img id="home_main" style="margin-bottom: 0px;" src="{{skin url='images/media/slideshow/slide0.jpg'}}" />
</div>
<div id="slideinfo">
  <div id="slide0">
    <p>Some text regarding the first slide.</p>
  </div>
  <div id="slide1" style="display:none;">
    <p>Some text regarding the second slide.</p>
  </div>
  <div id="slide2" style="display:none;">
    <p>Some text regarding the third slide.</p>
  </div>
</div>

<script type="text/javascript">
var images = new Array();
images[0] = '{{skin url='images/media/slideshow/slide0.jpg'}}';
images[1] = '{{skin url='images/media/slideshow/slide1.jpg'}}';
images[2] = '{{skin url='images/media/slideshow/slide2.jpg'}}';
images[3] = '{{skin url='images/media/slideshow/slide3.jpg'}}';
images[4] = '{{skin url='images/media/slideshow/slide4.jpg'}}';
images[5] = '{{skin url='images/media/slideshow/slide5.jpg'}}';

function preloadSlideshow() {
  
}

var index = 0;
var timer_id;

function makeSlides() {
  images.each(function(image, index) {
		imagepreload = new Image(1002, 550);
		imagepreload.src = images[index];
		var box = new Element('div', {id: 'box'+index});
		box.addClassName('slideshow-box');
		$('slideshow').insert(box);
		box.observe('mouseover', function(event){ $(this).addClassName('active'); });
		box.observe('mouseout', function(event){ $(this).removeClassName('active'); });
		box.observe('click', function(event) { changeSlide(index); });
  });


  $('box0').addClassName('current');
}

function changeSlideById(boxid) {
  changeSlide(parseInt(boxid.substring(3)));
}

function changeSlide(num) {
  clearTimeout(timer_id);
  oldIndex = index;

if($('slide' + oldIndex) != null) {
  new Effect.Parallel([
      new Effect.Opacity('home_main', {sync: true, from: 1.0, to: 0.0}),
      new Effect.Opacity('slide' + oldIndex, {sync: true, from: 1.0, to: 0.0})
    ], {
    duration: 0.5,
    queue: {position: 'front', scope: 'slideshow'},
    afterFinish: function() { $('home_main').src=images[num]; $('box' + oldIndex).removeClassName('current'); $('box' + num).addClassName('current'); if($('slide'+oldIndex) != null) $('slide' + oldIndex).hide(); if($('slide' + num) != null) $('slide' + num).show();}
  });
} else {

  new Effect.Parallel([
      new Effect.Opacity('home_main', {sync: true, from: 1.0, to: 0.0})
    ], {
    duration: 0.5,
    queue: {position: 'front', scope: 'slideshow'},
    afterFinish: function() { $('home_main').src=images[num]; $('box' + oldIndex).removeClassName('current'); $('box' + num).addClassName('current'); if($('slide'+oldIndex) != null) $('slide' + oldIndex).hide(); if($('slide' + num) != null) $('slide' + num).show();}
  });
}

if($('slide' + num) != null) {
  new Effect.Parallel([
      new Effect.Opacity('home_main', {sync: true, from: 0.0, to: 1.0}),
      new Effect.Opacity('slide' + num, {sync: true, from: 0.0, to: 1.0})
    ], {
    duration: 0.5,
    queue: {position: 'end', scope: 'slideshow'}
  });
} else {
  new Effect.Parallel([
      new Effect.Opacity('home_main', {sync: true, from: 0.0, to: 1.0})
    ], {
    duration: 0.5,
    queue: {position: 'end', scope: 'slideshow'}
  });
}

  index = num;
  if(index < images.length - 1)
    timer_id=setTimeout('changeSlide(' + (index+1) +')', 10000);
  else
    timer_id=setTimeout('changeSlide(0)', 10000);
}

makeSlides();
timer_id=setTimeout('changeSlide(1)', 10000);
</script>