Need help rewriting an jQuery image slideshow
<p>I am creating a website with an image slideshow. I have found this piece of code somewhere on the internet. It works more or less, but I am not always able to call it. I just need a class that I can add to an image, so it gets into the slideshow.</p>

<p>Since I am in first grade of my study, I do not fully understand how this piece of code works, so I'd like to rewrite it a little.</p>

<p>I need an image slideshow, which shows the projects my cliënt is working on. When the user clicks on the image, he's directed to a page with more information about the project.</p>

<p>If possible, I'd like to get rid of the 'slug' thing. Is there any way to achieve my goals in a simpler way?</p>

<pre><code>$(document).ready(function() {

var slideshow_delay = 8000;
var slideshow_fade = 500;

var slideshow_active = true;

function slideshow_change() {

if (slideshow_active) {
  var active = $('.featured_project ol.projects li.active');
  active.removeClass('active');
  $('.slug_' + active.data('slug')).fadeOut(slideshow_fade);

  if (active.is(':last-child')) {
    active = $('.featured_project ol.projects li:first-child');
  } else {
    active = active.next();
  }

  active.addClass('active');
  $('.slug_' + active.data('slug')).fadeIn(slideshow_fade);
}

setTimeout(slideshow_change, slideshow_delay);
}

setTimeout(slideshow_change, slideshow_delay);

$('.featured_project ol.projects li').live('mouseover', function() {
var active = $('.featured_project ol.projects li.active');
active.removeClass('active');
$('.slug_' + active.data('slug')).hide();

active = $(this);
active.addClass('active');
$('.slug_' + active.data('slug')).show();

slideshow_active = false;
});

$('.featured_project .find_out_more a').live('mouseover', function() {
slideshow_active = false;
});

$('.featured_project ol.projects li, .featured_project .find_out_more   a').live('mouseout', function() {
slideshow_active = true;
});

});
</code></pre>

<p>This is how I want to call the slideshow:</p>

<pre><code>    &lt;div class="slideshow"&gt;
      &lt;a href="portfolio/ovita.html"&gt;
        &lt;img src="media/images/portfolio/ovita_groot.jpg" width="450" height="257" alt="O-vita"&gt;
      &lt;/a&gt;
    &lt;/div&gt;

    &lt;div class="slideshow hidden"&gt;
      &lt;a href="portfolio/sww.html"&gt;
        &lt;img src="media/images/portfolio/sww_groot.jpg" width="450" height="257" alt="Sigaren WebWinkel"&gt;
      &lt;/a&gt;
    &lt;/div&gt;
</code></pre>

<p>One last thing, above piece of code gets really buggy after two minutes. It keeps changing the picture so fast that you are not able click on the right picture. I hope that we can solve that as well.</p>
