fading image at random

Question

I wonder if anyone can help or point me in the right direction.

I have a grid of images. What I'm hoping to do is grab all the images on the page and put them in an array(done). Then every 3 seconds I want to to randomly choose an image, fade it out and fade in another image from the same page.

can someone help me with this?

Also, do you use jQuery? Because it would make the process much simpler. — casraf, Dec 19 '13 at 09:05
@ChenAsraf http://meta.stackexchange.com/a/19492 much. This problem is trivial in native JS or using any library. — Niels Keurentjes, Dec 19 '13 at 09:07
Will just save you the need to implement fading in and out, which might take a bit of work to get working smoothly. Why reinvent the wheel? Unless you use CSS3 transitions to do that, which will limit browser support. — casraf, Dec 19 '13 at 09:12

Duckdoom5 · Accepted Answer · 2014-01-07T11:52:59.063

I've got a nice script I made once, it does use jquery though:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var curIndex = 0;
var src = ['imgs/derp.jpg', 'imgs/derp2.png'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 5000;

$(document).ready(function(){
    switchImageAndWait(true);
});

function switchImageAndWait(fadeOut2){
    if(fadeOut2){
        setTimeout(fadeOut, waitTimeInMilliseconds);
    }else{
        var index = Math.floor((Math.random()*src.length))
        if(curIndex == index){
            index++;
            if(index >= src.length){
                index-=2;
            }
        }
        curIndex = index;
        $("#swekker").attr("src", src[index]);
        fadeIn();
    }
}

function fadeOut(){
    $("#swekker").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}

function fadeIn(){
    $("#swekker").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}
</script>

It's a jquery script script that continuously fades in, waits and fades out again.

To use this script simply add it to an image:

<img width="602" height="400" src="imgs/derp.jpg" id="swekker"/>

Well thank u for awnsering my first question. (the fade one) but the thing i didnt have was the random selector, cun u help me with this? — Mike Oosterloo, Dec 19 '13 at 09:58
This script has a randomizer scripted in ;). var src = ['imgs/derp.jpg', 'imgs/derp2.png']; element.src = src[Math.floor((Math.random()*2))]; — Duckdoom5, Dec 19 '13 at 10:00
just add more images to the array: src = ['imgs/derp.jpg', 'imgs/derp2.png']; and those will be randomized — Duckdoom5, Dec 19 '13 at 10:02

fading image at random

1 Answers1