2 Random image slideshow on same page

I need to display 2 simple slideshow on the same page both with 5 images showing for a few seconds with no controls or captions or anything else.

I'm not a JS expert I have just tried Googling this but I can't get anything to work:

I can't get these to work:

http://jonraasch.com/blog/a-simple-jquery-slideshow

http://www.javascriptkit.com/script/script2/randomslide.shtml

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Has any one found a really simple image slideshow that'll work with 2 on the same page?

 

Lets go to your first link :
http://jonraasch.com/blog/a-simple-jquery-slideshow

Lets see the html for 2 in the same page :

<script>
function slideSwitch(id) {
    var $active = $('#'+id+' IMG.active');

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

    var $next =  $active.next().length ? $active.next()
        : $('#'+id+' IMG:first');

    $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('slideshow')", 5000 );
    setInterval( "slideSwitch('slideshow2')", 5000 );
});
</script>
<div id="slideshow">
    <img src="img/img1.jpg" alt="" class="active" />
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>
<div id="slideshow2">
    <img src="img/img1.jpg" alt="" class="active" />
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>

HTML:

Does it work ? I don't know... you try it

 

Hello tvoodoo, Thank you so much for this. Your solution for getting the two slideshows on one page worked like a dream. I had them both as div class = "slideshow" and amended the JS accordingly but creating two different ids and amending the code as you had shown was brilliant ! Thank you.

This worked both at strict HTML 4 and transitional xhtml 1.0.

I wanted them to be random so I made the code like this.

<script type="text/javascript"> 
 
/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

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

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


     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('slideshow')", 5000 );
    setInterval( "slideSwitch('slideshow2')", 5000 );
});
</script>

Code (markup):

This works, but unfortunately the first image is always the image with the "active" class.

 <img src="img/img1.jpg" alt="" class="active" />

Code (markup):

And if I delete the class the slideshow doesn't work.

But this is a small problem. Thank you very much.

 

Your welcome !