How can I get multiple individual rotating random images from a designated folder

I am currently using this random image gen to populate individual Div's on the page. How can I make it so each div has its own random rotating image. Here is the code I have so far.

$imagesDir = 'images/test/';

$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

$randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon1">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon2">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon3">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon4">

        <img src="rotate.php">

    </div>';

asked Jan 1 at 15:36

Flexxall

1616

You mean to change the images folder (for selecting random image) for each div? If so you need to repeat the first two lines before each echo to update your image folder.

– nazim
Jan 1 at 15:54

not to change the folder. to have a random from the folder fade in then out then when clicked switch to a new random image from the same folder then fade in fade out

– Flexxall
Jan 1 at 17:01

add a comment |

I am currently using this random image gen to populate individual Div's on the page. How can I make it so each div has its own random rotating image. Here is the code I have so far.

$imagesDir = 'images/test/';

$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

$randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon1">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon2">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon3">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon4">

        <img src="rotate.php">

    </div>';

asked Jan 1 at 15:36

Flexxall

1616

You mean to change the images folder (for selecting random image) for each div? If so you need to repeat the first two lines before each echo to update your image folder.

– nazim
Jan 1 at 15:54

not to change the folder. to have a random from the folder fade in then out then when clicked switch to a new random image from the same folder then fade in fade out

– Flexxall
Jan 1 at 17:01

add a comment |

I am currently using this random image gen to populate individual Div's on the page. How can I make it so each div has its own random rotating image. Here is the code I have so far.

$imagesDir = 'images/test/';

$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

$randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon1">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon2">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon3">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon4">

        <img src="rotate.php">

    </div>';

asked Jan 1 at 15:36

Flexxall

1616

I am currently using this random image gen to populate individual Div's on the page. How can I make it so each div has its own random rotating image. Here is the code I have so far.

$imagesDir = 'images/test/';

$images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

$randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon1">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon2">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon3">

        <img src="' . $randomImage  . '">

    </div>';

    $randomImage = $images[array_rand($images)];

    echo'

    <div id="baloon4">

        <img src="rotate.php">

    </div>';

php image slideshow

asked Jan 1 at 15:36

Flexxall

1616

asked Jan 1 at 15:36

Flexxall

1616

asked Jan 1 at 15:36

Flexxall

1616

asked Jan 1 at 15:36

Flexxall

1616

asked Jan 1 at 15:36

Flexxall

1616

You mean to change the images folder (for selecting random image) for each div? If so you need to repeat the first two lines before each echo to update your image folder.

– nazim
Jan 1 at 15:54

not to change the folder. to have a random from the folder fade in then out then when clicked switch to a new random image from the same folder then fade in fade out

– Flexxall
Jan 1 at 17:01

add a comment |

You mean to change the images folder (for selecting random image) for each div? If so you need to repeat the first two lines before each echo to update your image folder.

– nazim
Jan 1 at 15:54

not to change the folder. to have a random from the folder fade in then out then when clicked switch to a new random image from the same folder then fade in fade out

– Flexxall
Jan 1 at 17:01

You mean to change the images folder (for selecting random image) for each div? If so you need to repeat the first two lines before each echo to update your image folder.

– nazim
Jan 1 at 15:54

not to change the folder. to have a random from the folder fade in then out then when clicked switch to a new random image from the same folder then fade in fade out

– Flexxall
Jan 1 at 17:01

add a comment |

1 Answer
1

active

oldest

votes

try this way (inspired by this post):

    $imagesDir = 'images/test/';

    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

    $imageList = range(0,count($images));

    shuffle($imageList);

    $image_idx = 0;

    echo'

    <div id="baloon1">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

    echo'

    <div id="baloon2">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon3">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon4">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

answered Jan 1 at 15:54

Ass3mbler

3,11611617

well that does make them each individually random. sometimes it call no image and leaves one blank also it is not rotating through the images for each div but that part might be another step entirely

– Flexxall
Jan 1 at 16:34

You asked to have a random rotating image for each div, and this is what this code does, without duplicates images in each div. If you to rotate the image with fade in and fade out, you should use javascript. You cannot do that with PHP

– Ass3mbler
Jan 1 at 17:06

understandable and thank you. why is it still calling a blank image when loaded sometimes though ? it doesnt matter if some of the divs are the same image though as long as the populate with random to begin with. I do however have JS in place fading the current images just havnt added a on click or something yet

– Flexxall
Jan 1 at 17:32

@Flexxall, when it calls a blank image maybe it's a problem with the JS?

– Ass3mbler
Jan 2 at 16:47

I think i need to add a if statement to filter !empty

– Flexxall
Jan 2 at 19:04

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996721%2fhow-can-i-get-multiple-individual-rotating-random-images-from-a-designated-folde%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

try this way (inspired by this post):

    $imagesDir = 'images/test/';

    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

    $imageList = range(0,count($images));

    shuffle($imageList);

    $image_idx = 0;

    echo'

    <div id="baloon1">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

    echo'

    <div id="baloon2">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon3">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon4">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

answered Jan 1 at 15:54

Ass3mbler

3,11611617

well that does make them each individually random. sometimes it call no image and leaves one blank also it is not rotating through the images for each div but that part might be another step entirely

– Flexxall
Jan 1 at 16:34

You asked to have a random rotating image for each div, and this is what this code does, without duplicates images in each div. If you to rotate the image with fade in and fade out, you should use javascript. You cannot do that with PHP

– Ass3mbler
Jan 1 at 17:06

understandable and thank you. why is it still calling a blank image when loaded sometimes though ? it doesnt matter if some of the divs are the same image though as long as the populate with random to begin with. I do however have JS in place fading the current images just havnt added a on click or something yet

– Flexxall
Jan 1 at 17:32

@Flexxall, when it calls a blank image maybe it's a problem with the JS?

– Ass3mbler
Jan 2 at 16:47

I think i need to add a if statement to filter !empty

– Flexxall
Jan 2 at 19:04

add a comment |

try this way (inspired by this post):

    $imagesDir = 'images/test/';

    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

    $imageList = range(0,count($images));

    shuffle($imageList);

    $image_idx = 0;

    echo'

    <div id="baloon1">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

    echo'

    <div id="baloon2">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon3">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon4">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

answered Jan 1 at 15:54

Ass3mbler

3,11611617

well that does make them each individually random. sometimes it call no image and leaves one blank also it is not rotating through the images for each div but that part might be another step entirely

– Flexxall
Jan 1 at 16:34

You asked to have a random rotating image for each div, and this is what this code does, without duplicates images in each div. If you to rotate the image with fade in and fade out, you should use javascript. You cannot do that with PHP

– Ass3mbler
Jan 1 at 17:06

understandable and thank you. why is it still calling a blank image when loaded sometimes though ? it doesnt matter if some of the divs are the same image though as long as the populate with random to begin with. I do however have JS in place fading the current images just havnt added a on click or something yet

– Flexxall
Jan 1 at 17:32

@Flexxall, when it calls a blank image maybe it's a problem with the JS?

– Ass3mbler
Jan 2 at 16:47

I think i need to add a if statement to filter !empty

– Flexxall
Jan 2 at 19:04

add a comment |

try this way (inspired by this post):

    $imagesDir = 'images/test/';

    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

    $imageList = range(0,count($images));

    shuffle($imageList);

    $image_idx = 0;

    echo'

    <div id="baloon1">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

    echo'

    <div id="baloon2">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon3">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon4">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

answered Jan 1 at 15:54

Ass3mbler

3,11611617

try this way (inspired by this post):

    $imagesDir = 'images/test/';

    $images = glob($imagesDir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE);

    $imageList = range(0,count($images));

    shuffle($imageList);

    $image_idx = 0;

    echo'

    <div id="baloon1">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

    echo'

    <div id="baloon2">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon3">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';



    echo'

    <div id="baloon4">

        <img src="' . $images[$imageList[$image_idx++]]. '">

    </div>';

answered Jan 1 at 15:54

Ass3mbler

3,11611617

answered Jan 1 at 15:54

Ass3mbler

3,11611617

answered Jan 1 at 15:54

Ass3mbler

3,11611617

answered Jan 1 at 15:54

Ass3mbler

3,11611617

well that does make them each individually random. sometimes it call no image and leaves one blank also it is not rotating through the images for each div but that part might be another step entirely

– Flexxall
Jan 1 at 16:34

You asked to have a random rotating image for each div, and this is what this code does, without duplicates images in each div. If you to rotate the image with fade in and fade out, you should use javascript. You cannot do that with PHP

– Ass3mbler
Jan 1 at 17:06

understandable and thank you. why is it still calling a blank image when loaded sometimes though ? it doesnt matter if some of the divs are the same image though as long as the populate with random to begin with. I do however have JS in place fading the current images just havnt added a on click or something yet

– Flexxall
Jan 1 at 17:32

@Flexxall, when it calls a blank image maybe it's a problem with the JS?

– Ass3mbler
Jan 2 at 16:47

I think i need to add a if statement to filter !empty

– Flexxall
Jan 2 at 19:04

add a comment |

well that does make them each individually random. sometimes it call no image and leaves one blank also it is not rotating through the images for each div but that part might be another step entirely

– Flexxall
Jan 1 at 16:34

You asked to have a random rotating image for each div, and this is what this code does, without duplicates images in each div. If you to rotate the image with fade in and fade out, you should use javascript. You cannot do that with PHP

– Ass3mbler
Jan 1 at 17:06

understandable and thank you. why is it still calling a blank image when loaded sometimes though ? it doesnt matter if some of the divs are the same image though as long as the populate with random to begin with. I do however have JS in place fading the current images just havnt added a on click or something yet

– Flexxall
Jan 1 at 17:32

@Flexxall, when it calls a blank image maybe it's a problem with the JS?

– Ass3mbler
Jan 2 at 16:47

I think i need to add a if statement to filter !empty

– Flexxall
Jan 2 at 19:04

well that does make them each individually random. sometimes it call no image and leaves one blank also it is not rotating through the images for each div but that part might be another step entirely

– Flexxall
Jan 1 at 16:34

You asked to have a random rotating image for each div, and this is what this code does, without duplicates images in each div. If you to rotate the image with fade in and fade out, you should use javascript. You cannot do that with PHP

– Ass3mbler
Jan 1 at 17:06

understandable and thank you. why is it still calling a blank image when loaded sometimes though ? it doesnt matter if some of the divs are the same image though as long as the populate with random to begin with. I do however have JS in place fading the current images just havnt added a on click or something yet

– Flexxall
Jan 1 at 17:32

@Flexxall, when it calls a blank image maybe it's a problem with the JS?

– Ass3mbler
Jan 2 at 16:47

I think i need to add a if statement to filter !empty

– Flexxall
Jan 2 at 19:04

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu