I'm trying to adjust a program for a TV screen at my local football club. I already made the site work, but now I want to make it more user friendly.
Specifically, I want to make the site work so someone can just add the images to a certain folder, and the slideshow will use all images in the folder.
The relevant part of the code is below; notice that the images are hard-coded:
<html>
<head>
<script type="text/javascript" src="js/tabs.js"></script>
<script src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<div class="corner_1">
<?php include("inc/script.php"); ?>
</div>
<div class="slider" id="slider">
<ul>
<li style="background-image: url('http://homedir.com/images/IMG_4947.JPG'); no-repeat center center fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
background-attachment: fixed;">
</li>
<li style="background-image: url('http://homedir.com/images/IMG_4939.JPG'); no-repeat center center fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
background-attachment: fixed;">
</li>
<li style="background-image: url('http://homedir.com/images/IMG_4922.JPG'); no-repeat center center fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center top;
background-attachment: fixed;">
</li>
</ul>
</div>
</body>
</html>
I tried to make something with the glob() and echo functions in PHP, but couldn't get it to work.
You can do a scandir()
easily enough:
# I am just going to use this to clean up the html, you don't have to do this...
$style = array(
'background: no-repeat center center fixed',
'background-repeat: no-repeat',
'background-size: 100% 100%',
'background-position: center top',
'background-attachment: fixed'
);
$style = implode('; ',$style);
# I use a define('ROOT_DIR',__DIR__) in a root-based config file to get the full path
$path = '/var/www/vhosts/domain/images';
# Scan the directory
$dir = scandir($path);
# Loop through files in directory
foreach($dir as $file) {
# Use our root path to make sure file exists
# (there are . and .. that will be in the array
if(!is_file($path.'/'.$file))
continue;
?>
<li style="background-image: url('http://homedir.com/images/<?php echo $file ?>'); <?php echo $style ?>">
</li>
<?php
}