Started learning PHP/Javascript by altering example code to display a set of pictures from multiple folders and display the content on a page (this is for artwork from designers to be shown on large 4K monitors in rotation). I've taken a few days to get the below to work so far (which works fine), but I've been reading around and I think it's my basic knowledge that is causing me to get stuck at this point. I can't work out how to get the images to display once each (in the jQuery) and then return back to the PHP at the start of the script that enumerates the image folders again. Would the way forward be to create a loop around the whole PHP / JavaScript script? Or define them both as functions and have them included in a main script that executes the loop (forever)?
I think it's more about the fact that I don't understand how the jQuery is looping forever, I can see the I increment, but don't get how it's looping the images, rather than getting the number of images and incrementing until it hits the last image. Any help or explanation or example would be beneficial.
Here's the code:
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<script src="jquery-1.11.2.min.js"></script>
</head>
<html>
<style type="text/css">
body {
overflow:hidden;
}
</style>
<body bgcolor="#000000">
<Div id="holder">
<img src="team_a/blank.jpg" id="slideshow" style="max-height: 100%; max-width: 100%" />
</Div>
</html>
<?php
// Header("content-type: application/x-javascript");
$team_a = array();
$team_1 = array();
$team_2 = array();
$team_3 = array();
foreach (new DirectoryIterator('team_a') as $fileInfo) {
if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
$team_1[] = "team_a".'/'.$fileInfo->getFilename(); // Get file names of Team_A directory
}
foreach (new DirectoryIterator('team_b') as $fileInfo) {
if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
$team_2[] = "team_b".'/'.$fileInfo->getFilename(); // Get file names of Team_B directory
}
foreach (new DirectoryIterator('team_c') as $fileInfo) {
if($fileInfo->isDot() || !$fileInfo->isFile()) continue;
$team_3[] = "team_c".'/'.$fileInfo->getFilename(); // Get file names of Team_C directory
}
$team_a = array_merge_recursive($team_1, $team_2, $team_3); //Merge all the arrays recursively into $team_a
print_r ($team_a); // A quick test of the contents of $team_a
?>
<script = "text/javascript">
var images = <?php echo json_encode($team_a) ?>;
setInterval(forwardImage, 10000);
//This function will find the key for the current Image
function currentImageKey() {
i = jQuery.inArray($('#slideshow').attr('src'), images);
return i;
}
//This function will move the slideshow forward one
function forwardImage() {
currentImageKey();
if (i < images.length - 1) {
changeImage(i + 1);
} else {
changeImage(0);
}
}
//This function will change to image to whatever the variable i passes to it
function changeImage(i) {
$('#slideshow').stop().animate({
opacity: 0,
}, 1000, function() {
$('#slideshow').attr('src', images[i]);
$('#holder img').load(function() {
$('#slideshow').stop().animate({
opacity: 1,
}, 1000)
})
})
}
</script>
