PHP Classes

File: photos3.php

Recommend this page to a friend!
  Classes of Barton Phillips   Slide Show   photos3.php   Download  
File: photos3.php
Role: Example script
Content type: text/plain
Description: Example script
Class: Slide Show
Present a slide show of local or remote images
Author: By
Last change: Update of photos3.php
Date: 8 days ago
Size: 1,907 bytes
 

Contents

Class file image Download
<?php
// Demo using pure JavaScript and my PHP SlideShow class.

require_once('SlideShow.class.php');

// This is a post via 'fetch()'. The input is to 'php://input' not '$_POST'.

if(json_decode(file_get_contents("php://input"))) {
 
$ss = new SlideShow('url', 'https://bartonlp.org/photos', false); // Images are on my server.

 
$names = explode(",", $ss->getImageNames()); // Get a string of images seperated by commas and turn it into an array.
 
 
$images = [];
 
  foreach(
$names as $name) {
   
$img = file_get_contents($name);
    if(empty(
$img)) error_log("NO IMAGE");
   
   
$d = base64_encode($img);
   
   
$image = "<img src='data:image/jpeg;base64,$d'>";
   
$images[] = $image;
  }
  echo
json_encode($images);
  exit();
}

echo <<<EOF
<!DOCTYPE html>
<html>
<body>
<button type="submit">Show</button>
<div id="show"></div>
<script>
  let images = [];

  let but = document.querySelector("button");
  let show = document.querySelector("#show");
 
  but.addEventListener("click", function() {
    this.style.display = 'none';
    show.innerHTML = "<img src='https://bartonphillips.net/images/loading.gif'>";
    let test = { page: "start" };

    fetch("./photos3.php", {
      body: JSON.stringify(test),
      method: "POST",
      headers: {
        'content-type': 'application/json' // use json to send this
      }
    })
    .then(trans => {
      return trans.json();
    })
    .then(trans => {
      console.log("trans", trans);
      let n = 0;

      function show() {
        if(n > trans.length -1) {
          n = 0;
        }

        setTimeout(() => {
          document.querySelector("#show").innerHTML = trans[n];
          document.querySelector("#show img").style.width = "400px";
          ++n;
          show();
        }, 1000);
      }

      show();
    })
    .catch(trans => {
      console.log(trans);
    });
  });
</script>
</body>
</html>
EOF;