How to display multiple images on random?

Question

i have this script i'm using to display random images with hyperlinks. can anyone tell me how i might adapt it to display 5 random images at once, preferably without repeating the same image twice?

Thanks

    <script language="JavaScript">
<!--

/*
Random Image Link Script- By JavaScript Kit(http://www.javascriptkit.com)
Over 200+ free JavaScripts here!
Updated: 00/04/25
*/

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="data/adverts/ad1.png"
myimages[2]="data/adverts/ad2.png"
myimages[3]="data/adverts/ad3.png"
myimages[4]="data/adverts/ad4.png"
myimages[5]="data/adverts/ad5.png"


//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.javascriptkit.com"
imagelinks[2]="http://www.netscape.com"
imagelinks[3]="http://www.microsoft.com"
imagelinks[4]="http://www.dynamicdrive.com"
imagelinks[5]="http://www.freewarejava.com"


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>

You could put the images in an array, and shuffle it before showing — Alberto Arena, Nov 01 '12 at 20:40
http://stackoverflow.com/questions/2450954/how-to-randomize-a-javascript-array — Green Black, Nov 01 '12 at 20:41
Each time you show image remove it from the array and when its empty restore the all 5 images inside it.. — Svetoslav, Nov 01 '12 at 20:44

Asad Saeeduddin · Answer 1 · 2012-11-01T20:50:16.620

0

function random_imglink(){
    var myimages=new Array();
    ...
    var imagelinks=new Array();
    ...
    var used = [];
    var ry;
    var howmany = 5;
    for (var i = 1; i <= howmany; i++) {
        ry=Math.ceil(Math.random()*myimages.length);
        while(used.indexOf(ry)!=-1){
            ry=Math.ceil(Math.random()*myimages.length);
        }
        used.push[ry];
        document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
    }
}

this assumes you're going to put more images in your array than 5.

edited Nov 01 '12 at 20:50

answered Nov 01 '12 at 20:43

Asad Saeeduddin

46,193
6
90
139

Is this endless ? I mean after all 5 images are showed what will happen – Svetoslav Nov 01 '12 at 20:45
@Svetlio the loop only runs 5 times. After the images are shown the function ends. I'm not sure if there is anything else required afterwards. – Asad Saeeduddin Nov 01 '12 at 20:46
yes, I see but I think that the idea is not to show just once each image in random order. – Svetoslav Nov 01 '12 at 20:49
1

@Svetlio From the question: `display 5 random images at once, preferably without repeating the same image twice`. This selects 5 distinct images at random from a set and displays them. Perhaps OP can clarify if I have misunderstood the question? – Asad Saeeduddin Nov 01 '12 at 20:52

score 0 · Answer 2 · answered Nov 01 '12 at 21:22

Instead random and checking with while if you have already chosen an image you can move the choosen image to the end of the array and reduce the variable for the random by one. Example:

function random_imglink(select){
    if (select > 5 ) {
      // make it fail              ...
    }

    //specify random images below. You can have as many as you wish
    var myimages = new Array();
    myimages[0]="data/adverts/ad1.png"
    myimages[1]="data/adverts/ad2.png"
    myimages[2]="data/adverts/ad3.png"
    myimages[3]="data/adverts/ad4.png"
    myimages[4]="data/adverts/ad5.png"

    //specify corresponding links below
    var imagelinks=new Array()
    imagelinks[0]="http://www.javascriptkit.com"
    imagelinks[1]="http://www.netscape.com"
    imagelinks[2]="http://www.microsoft.com"
    imagelinks[3]="http://www.dynamicdrive.com"
    imagelinks[4]="http://www.freewarejava.com"


    var size = myimages.length

    for (var i=0;i<select;i++) {
        var index = Math.floor(Math.random() * size);                 


        document.write('<a href='+'"'+imagelinks[index]+'"'+'><img src="'+myimages[index]+'" border=0></a>');

        var tmp = myimages[index]; 
        myimages[index] = myimages[size - 1];
        myimages[size - 1] = tmp;

        tmp = imagelinks[index]; 
        imagelinks[index] = imagelinks[size - 1];
        imagelinks[size - 1] = tmp;  

        --size;
    }
}
random_imglink(3);

score 0 · Answer 3 · answered Jun 17 '16 at 13:34

It could be something like that in one line of code and without creating functions:

<img src="https://www.example.com/images/image-<?php echo rand(1,7); ?>.jpg">

In order to get this to work, you’ll want to name your images: image-1.jpg, image-2.jpg, image-3.jpg....image-7.jpg,

When the page loads, the PHP rand() will echo a random number (in this case, a number between 1 and 7), completing the URL and thus displaying the corresponding image. Source: https://jonbellah.com/load-random-images-with-php/

How to display multiple images on random?

3 Answers3