Advance slideshow manually with jquery

please be easy - first post!

Looking to modify the following script: http://jonraasch.com/blog/a-simple-jquery-slideshow

Love it's simplicity, trying to find a way to add an advance function

Preferably on the img or div - on click or from a link.

Any suggestions?

Appreciate the help

edit, below is the script and here is a link to a working version:

link to a live testing page

script:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the imag开发者_运维知识库es in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

// uncomment the 3 lines below to pull the images in random order

// var $sibs  = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
setInterval( "slideSwitch()", 5000 );

});

style:

#slideshow {
position:relative;
height:350px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

html:

<div id="slideshow">
        <img src="image01.jpg" width="262" height="496" border="0" class="active" />
        <img src="image02.jpg" width="262" height="496" border="0" />
        </div>

We could do this by changing the interval to a timeout, which gives us an id which we can reset at will. Then we can use a click even to reset this interval and advance manually, which in turn will start up the interval again.

Using the simplest example on jonraasch.com:

window.slideInterval = null;

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');

    window.slideInterval = setTimeout('slideSwitch()', 5000 )
}

jQuery(function() {
    window.slideInterval = setTimeout('slideSwitch()', 5000 );
});

$(el).click(function(){
    // reset interval
    clearTimeout(window.slideInterval);

    // trigger next slide manually
    slideSwitch();
});

Edit

Over the weekend I had the time to put some more attention to this, and I read up on the best practices in making a jQuery plugin. Code is slightly documented, but all in all fairly standard and not very complex, though has a fair bit of juggling with variables :)

If you use anything you should use this.

http://jsfiddle.net/sg3s/RFJMy/214/

btw, you can just delete the prev and rand functions if you don't want to use them, start, stop, init and transit to make the whole work.

That particular sample already has an advance function built in: slideSwitch. This function is called in a setInterval loop to advance the slide show. All you need to do is hook up that method to your button click and you should be good to go.

HTML:

<div id="advanceShow">Click to Advance</div>

JavaScript

$(document).ready(function() {
  $('#advanceShow').click(function() {
    slideShow();
  });
});