Create banner, dynamically using all images in directory

Question

I am currently working on some code to try and make an ad banner they rotates through all the images in my banner folder. I know I can make a banner which rotates if I state every image in the Array, but what I am wanting to do is create a banner that uses all the images inside the folder so I do not have to go back and recode every time a new image is uploaded to the banner folder. The banner images do not need to have a url assigned as they are only for display at this stage. I am trying to get the banner to display inside this div:

<div id="banner" name="RotateBanner"><img src="Images/banner/1.jpg" /></div>

Can anyone please provide me with a way for me to do this? Is this even possible?

*"Is this even possible"* ... yes but you need server side code to read the directory contents. It can't be done directly from browser which has no idea what is on your server. Take a look at php `glob()` — charlietfl, Apr 01 '17 at 16:20
So what is the problem? It is not very clear where you have difficulties implementing the rotation of the images. As an idea, if this is what you need, you can write a php script to get a random image ... or load list of images to the js code. Of course with an ajax call. — Bakudan, Apr 01 '17 at 16:22
I am using PHP and JavaScript alongside the HTML. Is that sufficient to do this? — Joel, Apr 01 '17 at 16:23
My main problem is that I wish the banner to use all the images in my image directory without naming each one in the array. I am wanting the banner to show all images, including ones that are uploaded, without having to go in and name the new ones in the array again. If this is not possible or practicable I will just continue to name each image I wish to show in the banner. — Joel, Apr 01 '17 at 16:27

score 0 · Answer 1 · edited May 23 '17 at 12:10

It's unclear if you just want to return all images in a directory, or if you want to select a specific one (such as the latest one uploaded).

The first thing you should do is to look at scandir() (Docs) and use that function to list all files in your directory and then select the one you're interested in. Notice that scandir() have a $sorting_order parameter where you can define to return the files alphabetically in ascending or descending order.

If you want to select the one that was latest uploaded, you could use the solution found here (PHP: Get the Latest File Addition in a Directory).

$lastMod = 0;
$lastModFile = null;
// Loop through all entries/files in the directory of the path.
foreach (scandir('path/to/directory/') as $entry) {
    // If the entry is a file, and the time updated is later than previous file.
    if (is_file($dir.$entry) && filectime($dir.$entry) > $lastMod) {
        // ... if it is, then set the current file as the latest file.
        $lastMod = filectime($dir.$entry);
        $lastModFile = $entry;
    }
}

Abk · Accepted Answer · 2017-04-01T17:23:27.373

0

Something like this, perhaps?

<!DOCTYPE html>
<html>
<body>
<?php
echo '<div id="banner">';

$dir    = 'Images/banner';
$images = glob("$dir/*.{jpg,jpeg,png,gif,bmp}", GLOB_BRACE);
foreach($images as $image){
  echo "<img class='bannerImages' src='$image'>";
}

echo '</div>';
?>
<script>
var myIndex = 0;
carousel();
function carousel() {
    var x = document.getElementsByClassName("bannerImages");
    for (var i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {
        myIndex = 1;
    }    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000);
}
</script>
</body>
</html>

edited Apr 01 '17 at 17:23

answered Apr 01 '17 at 16:32

Abk

16
3

Yes like this, except I wish to show only 1 image at a time and have them rotate/shuffle like an advertisement. What can I add to your code to make this happen? – Joel Apr 01 '17 at 16:42
You can use array_slice() to achieve that, I've edited my answer, try it now! – Abk Apr 01 '17 at 17:16
Oh, I didn't read that correctly, you want them (the images) to _actually_ shuffle .. That can't be done via PHP, you have to use JS for that .. Check out my answer now .. – Abk Apr 01 '17 at 17:23
Excellent!! Thank you so much! – Joel Apr 02 '17 at 03:40

Create banner, dynamically using all images in directory

2 Answers2