I have an image gallery which pulls in random images from the folder images/flip_images/. The files are names as a number then .jpg, e.g. 0.jpg, 1.jpg etc. There are 14 images which it can choose from, labelled 0 - 13. As there are only 14 images and the page needs 4 at a time, there is quite a bit of repeating, which I would like to avoid. I am using Javascript to generate the random image filenames and passing the variables into the JQuery .flip() command.
I have tried using the do while loop in the code below to change a global variable, compare the global variable to the others and pick another number if the number it chose in the first place is already in use. I can't, however, seem to get this to work. Is this a scope issue or have I just made a simple mistake in the code? Here is the code:
var randomNumber0= 0;
var randomNumber1= 1;
var randomNumber2= 2;
var randomNumber3= 3;
var refreshId0 = setInterval(function(){
var $this = $(this);
do {
randomNumber0=Math.floor(Math.random()*14)
}while(randomNumber0 == randomNumber1 || randomNumber0 == randomNumber2 || randomNumber0 == randomNumber3){
randomNumber0=Math.floor(Math.random()*14)
};
$("#flipboxa").flip({
direction: 'lr',
color: "transparent",
content: '<img src="images/flip_images/'+randomNumber0+'.jpg" width="120" height="275" alt="alt tag here" />',
});
return false;
}, 5000);
var refreshId1 = setInterval(function(){
var $this = $(this);
do {
randomNumber1=Math.floor(Math.random()*14)
}while(randomNumber1 == randomNumber0 || randomNumber1 == randomNumber2 || randomNumber1 == randomNumber3){
randomNumber1=Math.floor(Math.random()*14)
};
$("#flipboxb").flip({
direction: 'rl',
color: "transparent",
content: '<img src="images/flip_images/'+randomNumber1+'.jpg" width="120" height="275" alt="alt tag here" />',
});
return false;
}, 6000);
var refreshId2 = setInterval(function(){
var $this = $(this);
do {
randomNumber2=Math.floor(Math.random()*14)
}while(randomNumber2 == randomNumber0 || randomNumber2 == randomNumber1 || randomNumber2 == randomNumber3){
randomNumber2=Math.floor(Math.random()*14)
};
$("#flipboxc").flip({
direction: 'lr',
color: "transparent",
content: '<img src="images/flip_images/'+randomNumber2+'.jpg" width="120" height="275" alt="alt tag here" />',
});
return false;
}, 7000);
var refreshId3 = setInterval(function(){
var $this = $(this);
do {
randomNumber3=Math.floor(Math.random()*14)
}while(randomNumber3 == randomNumber0 || randomNumber3 == randomNumber1 || randomNumber3 == randomNumber2){
randomNumber3=Math.floor(Math.random()*14)
};
$("#flipboxd").flip({
direction: 'rl',
color: "transparent",
content: '<img src="images/flip_images/'+randomNumber3+'.jpg" width="120" height="275" alt="alt tag here" />',
});
return false;
}, 8000);
This is not the proper form of a do..while
do {
//something
}while(...){
//something else
};
Try it like this:
do {
//something
}
while(...);