Hi all

I have a javascript/html image gallery and i need to add jquery to make the transitions between images nicer. I am thinking a cross fade or something would be great but we aren't allowed to use plugins it all has to be coded by us. I am stuck on even where to start... any help would be fantastic. i have included my html and javascript. I think the best way would somehow to have the trigger on the play button but once again im so stuck i don't even know where to start.

Code:
function next()//everytime the big image is clicked it changes
      {
          i++;//adds another big image to the next one everytime it is clicked on and loops around
          if(i>=imageSorce.length)
          {
              i = 0;
          }
          document.getElementById("slide").src = "Assets/images/big/"+i+".jpg";
          document.getElementById('captionarea').innerHTML=caption[i];//adds captions
          clearTimeout(startSlideshow.timer);
          document.getElementById("stop").disabled=true;
          document.getElementById("stop").className += ' disabled';
          document.getElementById("play").disabled=false;
          document.getElementById("play").className = 'play';
      }

      function changeImage(evt,el)//changes the big image each time a thumbnail is clicked
      {   
          evt.preventDefault(evt);//fail gracefully when javascript is turned off.
          var elem = document.getElementById("slide");
          elem.src = "Assets/images/big/"+el+".jpg";
          document.getElementById('captionarea').innerHTML=caption[el];//adds captions when a thumbnail is pressed.
          i = el;
          clearTimeout(startSlideshow.timer);
          document.getElementById("stop").disabled=true;
          document.getElementById("stop").className += ' disabled';
          document.getElementById("play").disabled=false;
          document.getElementById("play").className = 'play';
      }


      var i = 0, imageSorce = [], preload = [];//add an array to cycle through the images
      imageSorce[0]="Assets/images/big/0.jpg";
      imageSorce[1]="Assets/images/big/1.jpg";
      imageSorce[2]="Assets/images/big/2.jpg";
      imageSorce[3]="Assets/images/big/3.jpg";
      imageSorce[4]="Assets/images/big/4.jpg";
      imageSorce[5]="Assets/images/big/5.jpg";
      imageSorce[6]="Assets/images/big/6.jpg";
      imageSorce[7]="Assets/images/big/7.jpg";

      var caption = [];//an array of captions to add to each image that was defined above in another array
      caption[0]="Matiatia Bay, Waiheke Islands main entry point"
      caption[1]="Beautiful White sand Oneroa beach"
      caption[2]="View overlooking Matiatia Bay"
      caption[3]="Look out point over Palm Beach"
      caption[4]="Enclosure bay one of Waihekes quietest beaches"
      caption[5]="Sandy Bay, a great place for a picnic!"
      caption[6]="Boat Sheds at Oneroa Beach"
      caption[7]="Te Whau, Waihekes most prestigious vineyard with the best view."

      for (var j=0; j<imageSorce.length;j++)
      {
      preload[j] = new Image;
      preload[j].src = imageSorce[j];

      }
      function mode(param)//begining of play and stop feature.
      {
      smode=param;
      }

      function startSlideshow()//starts slideshow when the play button is pressed.
      {
      if(smode=="play")
      {
      i++;
      if(i>=imageSorce.length)
      {
      i=0;
      }
      document.getElementById("play").disabled=true;
      document.getElementById("play").className += ' disabled';//disables the play button when it has been clicked once
      document.getElementById("stop").disabled=false;
      document.getElementById("stop").className = 'stop';
      document.getElementById("slide").src=imageSorce[i];
      document.getElementById('captionarea').innerHTML=caption[i];//adds captions when the gallery is played.

      startSlideshow.timer = setTimeout(startSlideshow, 3000);//sets the time inbetween each slide

      }

      else if(smode=="stop")//stops slideshow when the stop button is pressed.
      {
      clearTimeout(startSlideshow.timer);
      document.getElementById("stop").disabled=true;
      document.getElementById("stop").className += ' disabled';//disables the play button when the page is loaded.
      document.getElementById("play").disabled=false;
      document.getElementById("play").className = 'play';
      }
      }
HTML Code:
<div id="gallery">
          <img id="slide" src="Assets/images/big/0.jpg" onClick="next();">
         <span id="captionarea">caption one</span>
           
            <br />
                    </div>    
      <div id="button">

      <input id="play" class="play" type="button" value="" onClick="mode('play');startSlideshow();" />

      <input id="stop" class="stop disabled" type="button" value="" disabled onclick="mode('stop');startSlideshow();" />

          </div>
         
      <div id="thumb">

              <ul class="thumbnail">

         
                  <li><a href="Assets/images/big/0.jpg" onClick="changeImage(event,'0');"><img class="thumb" src="Assets/images/thumbs/0.jpg" /></a></li>
                  <li><a href="Assets/images/big/1.jpg" onClick="changeImage(event,'1');"><img class="thumb" src="Assets/images/thumbs/1.jpg" /></a></li>
                  <li><a href="Assets/images/big/2.jpg" onClick="changeImage(event,'2');"><img class="thumb" src="Assets/images/thumbs/2.jpg" /></a></li>
                  <li><a href="Assets/images/big/3.jpg" onClick="changeImage(event,'3');"><img class="thumb" src="Assets/images/thumbs/3.jpg" /></a></li>
                  <li><a href="Assets/images/big/4.jpg" onClick="changeImage(event,'4');"><img class="thumb" src="Assets/images/thumbs/4.jpg" /></a></li>
                  <li><a href="Assets/images/big/5.jpg" onClick="changeImage(event,'5');"><img class="thumb" src="Assets/images/thumbs/5.jpg" /></a></li>
                  <li><a href="Assets/images/big/6.jpg" onClick="changeImage(event,'6');"><img class="thumb" src="Assets/images/thumbs/6.jpg" /></a></li>
                  <li><a href="Assets/images/big/7.jpg" onClick="changeImage(event,'7');"><img class="thumb" src="Assets/images/thumbs/7.jpg" /></a></li>
         
              </ul>
          </div><!-- thumb-->
         



      </div><!--gallery-->