Alles is mogelijk.
Met PHP en AJAX.
Oefen met deze 2 bestanden.
LaatsteAfbeelding.php
Dit bestand haalt de afbeeldingen op en maakt van de laatste base64 code van en stuurt dat terug.
De padnaam aanpassen.
<?php
$path = '/volume1/photo/webpictures/'; // pad naar afbeeldingen
$myarrayIn = glob($path . '*.*'); // haal afbeeldingen op
usort( $myarrayIn, function( $a, $b ) { return filemtime($a) - filemtime( $b); } ); // sorteer op datum
$count = count($myarrayIn) - 1; // tel het aantal afbeeldingen
$img_file = $myarrayIn[$count]; // de laatste afbeelding
$imgData = base64_encode( file_get_contents( $img_file ) ); // maak base64
$src = 'data: ' . mime_content_type( $img_file ) . ';base64,' . $imgData; // de code om later de afbeelding te tonen
//echo '<pre>' . print_r( $myarrayIn, TRUE ) . '</pre>'; // wat demo uitvoer
//echo $src . '<br /><br />';
//echo json_encode($src);
echo $src; // dit wordt teruggestuurd
?>
LaatsteAfbeelding.html
Een webpagina met JavaScript die de afbeelding ophaalt en op de juiste plek neerzet.
<script>
var timer = 10;
</script>
<img id='LatestImage' src="placeholder.jpg" style="width: 400px; height:300px;"/>
<p>Nieuwe afbeelding in <span id="timer" style="border-radius: 10px; display:inline-block; width: 25px;color:white;background-color:navy; font-family: futura;padding:0.200em; text-align: center;">10</span> seconden</p>
<script>
function getLatestImage()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var myObj = xmlhttp.responseText;
//alert(myObj);
document.getElementById("LatestImage").src = myObj;
}
}
//xmlhttp.open("POST","get_password.php",true);
xmlhttp.open("POST","LaatsteAfbeelding.php");
xmlhttp.send();
}
var myVar = setInterval(myTimer, timer * 1000);
function myTimer()
{
getLatestImage();
startTimer();
}
startTimer();
function startTimer()
{
var countStart = timer;
var x = setInterval(function() {
countStart = countStart - 1;
var distance = countStart;
// If the count down is over, write some text
if (distance <= 0) {
clearInterval(x);
document. getElementById("timer").innerHTML = timer;
} else {
document. getElementById("timer").innerHTML = distance;
}
}, 1000);
}
</script>