jQuery random fading images (from siblings) in random divs (with specific class)

Question

I wanted a script to fade in and out of images within a div using jQuery.

I'm using the following code (from http://jonraasch.com/blog/a-simple-jquery-slideshow):

function slideSwitch() {

var $active = $('div.box1 img.active');

if ( $active.length == 0 ) $active = $('div.box1 img:last');

    var $sibs  = $active.siblings('img');
    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 );
});

This script works well at the moment and selects randomly from images that are siblings from within the div.box1.

In addition to this I decided I also wanted it to first select a random div from those with a class "boxgrid" (instead of a specific class like .box1) on the page (there are 6 container divs with the .boxgrid class applied) which are containers for the images.

i.e. I first want to randomly select a .boxgrid div and THEN within that selected div go on and select a random image as per the above script and fade to the next one. Here's the xhtml I'm using:

<div class="boxgrid box1">
                            <img src="img/homepage/box1-1.png" class="active"/>
                            <img src="img/homepage/box1-2.png"/>
                            <div class="boxcaption">
                                <h3>Header</h3>
                              <p>Text goes here...</p>
                            </div>

                        </div>

Attempting this myself (i'm not a programmer obviously - but I'm trying) I've come up with the following:

function slideSwitch() {

var $randbox = $('div.boxgrid').siblings();
var rndBox = Math.floor(Math.random() * $randbox.length );


var $active = $( $randbox[ rndBox ] );

if ( $active.length == 0 ) $active = $('img:last');

    var $sibs  = $active.siblings('img');
    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 );
});

I'm looking for a bit of help with this one as I'm struggling to get it to select a random div.boxgrid and THEN fade the image in it randomly as in the original script. Am I close?

Any help would be greatly appreciated.

Thanks.

Answer 1

first of all you should use the setTimeout instead of setInterval in my opinion.

secondly jquery has a slide up and slide down method you can use will do the same thing.

thirdly you can use the eq method to select the indexed box.

e.g. $('box:eq('+random_number+')').slideDown();

and use the setTimeout to do the slideUp