Image slideshow

This is a very simple Javascript image slideshow that I created as a Joomla module. This will not only pull images from a folder on the server and display them one at a time, but it will fade them in and out, so it is not a herky-jerky show. This fade is done by using two img's that are positioned on top of each other so it fades one image to the other and not one image to the background, then to the next. We start with the img src's assigned and loaded. Then we will change the src to the second image url and fade to it and pause. We then change the first img to be the same as the second and fade to it. Then we change the second img src to the thrid image url and fade to it.

Here is all of the code, then I will explain it bit by bit after it you see it all.

function stopTimer(t){
clearTimeout(t);
}

 

<script>
function fade( up, down, j ){
  • var x = document.getElementById( up );
  • var y = document.getElementById( down );
  • // document.getElementById('report').innerHTML = j;
  • var k = 100 - j;
  • x.style.opacity = j * 0.01;
  • x.style.filter = 'alpha(opacity = ' + j + ')';
  • y.style.opacity = k * 0.01;
  • y.style.filter = 'alpha(opacity = ' + k + ')';
  • j = j + 1 ;
  • if( j >= 101 ) {return;};
  • fadeTimer=setTimeout( "fade( '"+up+"','"+down+"',"+j+")", 3)

}

 

function slideshow(i){
  • div1=document.getElementById('ajaxcontent1');
  • div2=document.getElementById('ajaxcontent2');
  • var j = 1;
  • str = '' + i;
  • while (str.length < 2) {
    • str = '0' + str;
  • }
  • fade(div1.id, div2.id, j);
  • div2.src = '/images/stories/homeimages/image'+str+'.jpg';
  • if( i < 16 ){ i++; }else{ i = 1; }
  • str = '' + i;
  • while (str.length < 2) {
    • str = '0' + str;
    }
  • div1.src = '/images/stories/homeimages/image'+str+'.jpg';
  • slideTimer=setTimeout("slideshow( "+i+" )",3000);
}

window.onload = slideshow(0);

// -->

</sctipt>

This starts at the end really...with the last statement:

window.onload = slideshow(0);
Tags: Joomla Modules Javascript