Photo Slideshow, Smode/fade

[callesson]

Hello there!

 

Im new with javascript and im having this script that i got from school. And im trying to modify it a little bit. I have added a js script so the slideshow starts by it self. It works fine, but I want the pictures to like fade in, like smode. So it doesn't just change photo all quick.

 

Here is the code

 

Code from school.

$(document).ready(function () {
  // hide all but first image if we have js
  $('.large-images li:not(:first)').hide();
  // show thumbnails if we have js
  $('.small-images').show();
  // control the visibility of the control buttons
  $('.large-images img, .controls').bind("mouseenter", showControls).bind("mouseleave", hideControls);
  
  hideControls();
  
  function showControls() {
    $('.controls').show();
  }

  function hideControls() {
    $('.controls').hide();
  }
  
  $('.prev').bind("click", function() {
    prev();
    return false;
  });
  
  $('.next').bind("click", function() {
    next();
    return false;
  });
  
  $('.small-images a').bind("click", function() {
    display($(this).parent().attr('value'));
    return false;
  });
});

function prev() {
  var total = $(".large-images li").length;
  var current = $(".large-images li:visible").attr('value');
  if(current > 1) {
    display(parseInt(current)-1);
  } else {
    display(total);
  }
}

function next() {
  var total = $(".large-images li").length;
  var current = $(".large-images li:visible").attr('value');
  if(current < total) {
    display(parseInt(current)+1);
  } else {
    display(1);
  }
}

function display(num) {
  $(".large-images li").hide();
  $(".large-images li[value='"+num+"']").show();
  $('.small-images a').removeClass('selected');
  $(".small-images li[value='"+num+"'] a").addClass('selected');
}

 

Self start.

<script language="JavaScript1.1">
var image1=new Image()
image1.src="/bilder/tokyo1.jpg"
var image2=new Image()
image2.src="/bilder/tokyo2.jpg"
var image3=new Image()
image3.src="/bilder/tokyo3.jpg"
var image4=new Image()
image4.src="/bilder/tokyo4.jpg"
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<4)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>

[lemmin]

You can use setInterval() or setTimeout() to iterate through opacity levels in the styles.