PHP Classes

File: photos-jquery.php

Recommend this page to a friend!
  Classes of Barton Phillips   Slide Show   photos-jquery.php   Download  
File: photos-jquery.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 photos-jquery.php
Date: 4 months ago
Size: 2,467 bytes


Class file image Download
// This Demo uses jQuery and the PHP SlideShow class.

// Select the mode: loc or url
// $mode = "loc";
$mode = "url";
// Select where your images come from.
// If 'loc' then use a relative or absolute path to somewhere on this computer.
//$url = "./images"; // Points to the directory here.
// If 'url' then use an full URL to a server where the images are.
$url = ""; // Change this if you want. The images are on this server.

$ss = new SlideShow($mode, $url, false);

$names = $ss->getImageNames();
//error_log("names: " . $names);

echo <<<EOF
<!DOCTYPE html>
<html lang="en">
  <title>Photo Slide Show Demo</title>
  <!-- jQuery -->
  <script src=""></script>
jQuery(document).ready(function($) {
  let names = "
$names".split(','); // Make the PHP values $names into an array.
  let mode = "
  let width = 400;

  let images = [];
  function next(i) {
    console.log(i, names[i]);

    let ss = $("#slideshow");
    let img = $("img", ss);

    if(mode == 'loc') {
      img.attr("src", "SlideShow.class.php?mode=proxy&path="+names[i]);
    } else {
      img.attr("src", names[i]);

    img.on('load', function() {
      let h = this.height, // Get the real width
      w = this.width, // and height
      sized = h / w * width; // width is the actual size we want, and h is the actual height based
                             // on the formula

      ss.css({border: '4px solid black', width: '400px', height: sized +'px'}).show();
    if(++i >= names.length) {
      i = 0;
    setTimeout(function() {
    }, 5000);


#slideshow {
        position: relative;
#slideshow img {
        max-height: 700px;
#footer {
        border: 1px solid back;
        background-color: green;
        color: white;
        margin: 10px;
        width: auto;
#errors {
        border: 1px solid red;
        margin-left: 0;
        width: 500px;
        margin-right: auto;
        margin-top: 40px;
        margin-bottom: 40px;
        height: auto;
        text-aligh: center;
        display: none;
        overflow: auto;

<div id="slideshow" style="border: 4px solid black"></div>