CODEWITHSUNDEEP
javascriptjqueryrandomslideshow
live2create
live2create

Reputation: 13

Javascript slideshow with random first pic?

I'm trying to setup this slideshow script so that the first pic that shows is random (I need the first pic to be a different/random slide everytime we go to the site), the remaining pics can be displayed in the right order, that's fine.

I'm using Jon Raasch's simple jquery slideshow script, here it goes:

<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow DIV.active');
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV: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()", 2500 );
});
</script>

<div id="slideshow">
<div class="active"><img src="images/slide1.jpg"></div>
<div><img src="images/slide2.jpg"></div>
<div><img src="images/slide3.jpg"></div>
<div><img src="images/slide4.jpg"></div>
<div><img src="images/slide5.jpg"></div>
</div>

and the CSS:

#slideshow {
position:relative;
height:401px;
}
#slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}

I've tried a few things but javascript really isn't my cup of tea ("designer-mind" here) and what I've tried is not working. Any ideas?

Thanks so much!

Upvotes: 1

Views: 794

Answers (3)

jfriend00
jfriend00

Reputation: 707218

Remove the active class from the HTML and then set it initially with this code by changing this line from this and adjust the CSS so no slides are visible until your JS runs:

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

to this:

if ( $active.length == 0 ) {
    var slides = $('#slideshow DIV');
    $active = slides.eq(Math.floor(Math.random() * slides.length));
}

Working demo: http://jsfiddle.net/jfriend00/mpYSL/

Upvotes: 1

Valuk
Valuk

Reputation: 1636

Based on jfriend00's answer, you need to set your script to this:

 function slideSwitch() {
    var $active = $('#slideshow div.active');
    if ( $active.length == 0 ) {
    var slides = $('#slideshow div');
    $active = slides.eq(Math.floor(Math.random() * slides.length));
}
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    slideSwitch();
    setInterval( function(){slideSwitch()}, 2500 );
});

There were some syntax errors and I had to change how the setInterval is being called.

Working fiddle: http://jsfiddle.net/f2UPm/

Upvotes: 1

Halcyon
Halcyon

Reputation: 57709

Something like this:

$(function() {
    var slides, index, current, last, last_index;
    slides = $('#slideshow div');
    // initialize index randomly
    index = Math.floor(Math.rand() * slides.length);
    // do a % trick to get index - 1 looping
    last_index = (index + slides.length - 1) % slides.length;
    last = slices[last_index]; // initialize last

    function slideSwitch() {
        current = slides[index];
        index = (index + 1) % slides.length; // % to loop
        current.addClass("active");
        last.addClass("last-active");
        current.css({ "opacity": 0.0 })
            .animate({ "opacity": 1.0}, 1000, function() {
                current.removeClass("active");
                last.addClass("active");
                last.removeClass("last-active");
                last = current;
            });
    }
    setInterval(slideSwitch, 2500);
    slideShow(); // run once now, because interval doesn't run until 2500ms
});

Upvotes: 0

Related Questions