Randomizing the first image on this slideshow?

Question

I've got this jquery-based slideshow up and running just fine, the author even put in a randomization setting which is what I needed. It works great except that it doesn't randomize the first slide. Any ideas? Thanks:)

Here's the js: (or go to the original page for more info)

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

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

    // use this to pull the divs in the order they appear in the markup
   // var $next =  $active.next().length ? $active.next()
    //    : $('#slideshow DIV:first');

    // uncomment below to pull the divs randomly
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()", 20000 );
});

HTML:

<div id="slideshow">
    <div class="active">
        <img src="img/img1.jpg" />
    </div>
    <div>
        <img src="img/img2.jpg" />
    </div>
    <div>
        <img src="img/img3.jpg" />
    </div>
</div>

Try `var $sibs = $active.siblings().andSelf()` to select all of the elements. Not sure if this is the problem though. — Felix Kling, Jul 10 '11 at 08:56

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

Looks like it only randomizes the siblings of the active slide, not including the current active slide, which is the first one when you load the page. You could fix the plugin's code, or be lazy like I would be, and randomize those images before initializing the slideshow. Use a plugin like the one in the answer here: Randomize a sequence of div elements with jQuery

edited May 23 '17 at 12:19

Community

1
1

answered Jul 10 '11 at 08:41

ElonU Webdev

2,451
14
15

score 0 · Answer 2 · answered Jul 10 '11 at 08:52

Try randomizing with something like:

 function slideSwitch() {
        var $active = $('#slideshow div').eq(Math.floor(Math.random() * $('#slideshow div').length);
        $(".active").removeClass("active");
        $active.addClass("active");

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

        // use this to pull the divs in the order they appear in the markup
       // var $next =  $active.next().length ? $active.next()
        //    : $('#slideshow DIV:first');

        // uncomment below to pull the divs randomly
    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()", 20000 );
    });

Thanks for the replies guys, I didn't try out your solutions since I got it to work with a simple php: Replace the first image div with '' ^That randomizes the first loaded image on page load with img1.jpg, img2.jpg, and img3.jpg, so combined with the javascript randomizing after the first image has been loaded, you end up with full ranomization :). Dirty, but it works for me. — user837433, Jul 10 '11 at 22:09

Randomizing the first image on this slideshow?

2 Answers2