Image randomizer - jQuery

Question

I am learning jQuery and I want to implement an image randomizer.

I have a list of images that need to be displayed. I want them to be displayed randomly.

This is what I have implemented, but it sill has not satisfied me:

/** Initialisierung*/
function showFotos() {

// Nummern der Bilder im Verzeichnis 'images'
start_nr = 1;
end_nr = 5;


// Bilder eventuell vorladen
for (i=start_nr; i<=end_nr; i++ ) {
preload_img = new Image();
preload_img.src = 'images/' + i + '.jpg';
}
// #show-1, #show-2, #show-3 bekommen einen zunächst 'leeren' img-tag mit den Dimensionen der Bilder zugefügt
$('#show-1').append('<img src="" width="250" height="250" />');
// Diese Function wird einmalig aufgerufen und somit Start-Bilder initialisiert
randomize();
}

// Random Funktion -> kleinster, grösster Wert
function randomXToY(minVal,maxVal,floatVal) {
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal=='undefined'?Math.round(randVal):randVal. toFixed(floatVal);
}

// die 'Slotmachine'
function randomize() {
// die fünf Slots
for (i=1; i<=5; i++ ) {
// Zufallszahl
num = randomXToY(start_nr, end_nr);
// Zufallszahl = Bildnummer
$('#show-' + i + ' img').attr('src', 'images/' + num + '.jpg');
}

This is what I want:

When I click on "continue", the next image will be displayed.

When I click on back, the further image will be displayed.

How can I do it?

enter image description here

UPDATE!!!! I solved the problem!!!

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
#items {
    position : relative;
    width : 400px;
    height : 200px;
    top : 20px;
    left : 20px;
}
.item {

    position : absolute;
    border : 1px solid #ccc;
    width : 398px;
    height : 198px;
    display :none;
    text-align : right;
    font-size : 40px;
}
.first{
    display : block;
}
#controls {
    margin-top : 30px;
}
li {
    display : inline-block;
    padding : 5px;
    border : 1px solid #ccc;
    background-color : #eee;
    cursor : pointer;
}
#play {
    display : none;
}
.first#item1  {
    background-image: url(D:/images/images1.jpg);
    background-repeat: no-repeat;
        width : 398px;
    height : 198px;
}
.item#item2 {
       background-image: url(D:/images/images2.jpg);
    background-repeat: no-repeat;
        width : 398px;
    height : 198px;
}
.item#item3 {
       background-image: url(D:/images/images2.jpg);
    background-repeat: no-repeat;
        width : 398px;
    height : 198px;
}

.item#item4{
       background-image: url(D:/images/images4.jpg);
    background-repeat: no-repeat;
        width : 398px;
    height : 198px;
}
.item#item5{
    background-image: url(D:/images/images5.jpg);
    background-repeat: no-repeat;
        width : 398px;
    height : 198px;
}
</style>
<script>
$(function() {

//To store timeout id
var timeoutId;

var slideImage = function( step ) {

    if ( step == undefined ) step = 1;

    //Clear timeout if any
    clearTimeout ( timeoutId );

    //Get current image's index
    var indx = $('.item:visible').index('.item');

    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadeout this item
       $('.item:visible').fadeOut();
    }

    //Increment for next item
    indx = indx + step ;

    //Check bounds for next item
    if ( indx >= $('.item').length ) {
        indx = 0;
    } else if ( indx < 0 ) {
        indx = $('.item').length - 1;
    }

    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadein next item
       $('.item:eq(' + indx + ')').fadeIn();
    }

    //Set Itmeout
    timeoutId = setTimeout ( slideImage, 5000 );
};

//Start sliding
slideImage(0);

//When clicked on prev
$('#prev').click(function() {

    //slideImage with step = -1
    slideImage ( -1 );   
});

//When clicked on next
$('#next').click(function() {

     //slideImage with step = 1
     slideImage ( 1 );
});

//When clicked on Pause
$('#pause').click(function() {

   //Clear timeout
   clearTimeout ( timeoutId );    

    //Hide Pause and show Play
    $(this).hide();
    $('#play').show();
});

//When clicked on Play
$('#play').click(function() {

   //Start slide image
   slideImage(0);

   //Hide Play and show Pause
   $(this).hide();
   $('#pause').show();    
});

});
</script>
</head>
<body>
<div id='items'>
    <div id= 'item1' class='item first'>item 1</div>
    <div id= 'item2' class='item'>item2</div>
    <div id= 'item3' class='item'>item3</div>
    <div id= 'item4' class='item'>item4</div>
    <div id= 'item5' class='item'>item5</div>

</div>
<ul id='controls'>
    <li id='prev'> << Zurueck</li>

    <li id='next'>Weiter >> </li>
</ul>
</body>
</html>

It works very good but not with fire fox...I don't know why...

Why are you returning `typeof` from the `randomXToY()` function? I think you just have to return the file name and it should work for you. Also, you're calling this function with only two parameters when it accepts three...not a big issue but you never know. Thoughts? — Vivek Jain, Dec 17 '13 at 13:53
@theghostofc it is working! But the big problem is to use the continue and back button... — lisa, Dec 17 '13 at 13:59
If you want to move forward and back through the images, you need to [build a randomized array](http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array). — Blazemonger, Dec 17 '13 at 14:12
@lisa, what is the purpose of the Back and Continue buttons? — Vivek Jain, Dec 18 '13 at 09:09
This is what I want: When I click on "continue", the next image will be displayed. When I click on back, the further image will be displayed. Do you understand me? — lisa, Dec 18 '13 at 18:16

jgroenen · Answer 1 · 2013-12-30T09:26:05.487

0

(function () {

    var images = ["image1.jpg", "whatever2.png", "3", "4", "etc5"];

    // Randomize these images.
    for (var i = 0; i < 20; ++i) {
        var a = Math.floor(Math.random() * images.length)),
            b = Math.floor(Math.random() * images.length));
        var tmp = images[a];
        images[a] = images[b];
        images[b] = tmp;
    }

    var index = 0;

    function back() {
        index--;
        if (index < 0) {
            index = images.length - 1;
        }
        changeImage();
    }

    function next() {
        index = (index + 1) % images.length;
        changeImage();
    }

    function changeImage() {
        // Something like $("img.whatever").attr("src", images[index]);
    }

    // Hook stuff here.

)();

edited Dec 30 '13 at 09:26

answered Dec 17 '13 at 14:14

jgroenen

1,332
1
8
13

thx for your answer, what is suppose to be in the function changeImage()? I think the function back() will not give me the last image, but the image before the image, which is currently being dispayed... or what do yo think? – lisa Dec 17 '13 at 14:21
Check the changeImage() function, I did a suggestion there. – jgroenen Dec 30 '13 at 09:26
Back will give you the previous image in the array. The array is randomized, so the order of the images is random (but looping). Is this not what you want? (You could accept the answer.) – jgroenen Jan 07 '14 at 13:48

Image randomizer - jQuery

1 Answers1