HTML 带有动态上传照片的照片幻灯片

Question

我正在寻找要在网页中使用的照片幻灯片（HTML、php 和 JS/jQuery）。它应该支持全屏和动画以及大量图像。幻灯片应显示特定文件夹中的所有图像。到目前为止，我正在使用 Superslides (http://archive.nicinabox.com/superslides)，效果非常好。

但这是我的问题。幻灯片将在活动期间放映，我已经开发了一个用于照片上传的 PHP 脚本，可将图像放在指定的文件夹中。幻灯片（可能是 Superslides 的修改版本或从头开始的新项目）应首先显示所有新图像，然后，在第一次显示所有新图像后，它应检查是否已上传新图像。如果是这样，它应该显示它们。否则它应该从旧图像开始一个循环。在检查是否添加了新图像之前，它不应该显示所有旧图像！它可以按预定方式检查更新的图像，或者它可以接收 "push notification"（我不知道这是否可以用 JS，也许用 AJAX？）。

是否有开箱即用的东西或可遵循的教程？请记住，我不是互联网技术专家（我从事桌面开发工作），我非常擅长 PHP，但不擅长 JS...

更新：这就是我目前正在做的...这种方式行不通！ Superslides 未正确初始化（我想它没有计算正确的图像数量）。此外，没有 "priority" 队列首先显示最新照片。最后，图像列表未以编程方式更新。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TEST PHOTO PLAYER</title>
    <link rel="stylesheet" href="css/superslides.css">
  </head>
  <body>
    <div id="slides">
      <div class="slides-container" id="slides-foto-test">
      </div>

      <nav class="slides-navigation">
        <a href="#" class="next">Next</a>
        <a href="#" class="prev">Previous</a>
      </nav>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
        $.ajax({
          url: "photo-list.php",
          dataType: "json",
          success: function (data) {
            $.each(data, function(i,filename) {
              $("#slides-foto-test").append("<img src='" + filename + "'>");
            });
          }
        }); 
      });
    </script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.animate-enhanced.min.js"></script>
    <script src="js/jquery.superslides.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
      $(function() {
        $('#slides').superslides({
          hashchange: true,
          play: 4000
        });

        $('#slides').on('mouseenter', function() {
          $(this).superslides('stop');
          console.log('Stopped')
        });
        $('#slides').on('mouseleave', function() {
          $(this).superslides('start');
          console.log('Started')
        });
      });
    </script>
  </body>
</html>

这是照片-list.php文件：

<?php
  $filenameArray = array();
  $handle = opendir(dirname(realpath(__FILE__)).'/images/a-folder/');
  while($file = readdir($handle)){
    if($file !== '.' && $file !== '..'){
      array_push($filenameArray, "images/a-folder/$file");
    }
  }
  echo json_encode($filenameArray);
?>

Answer 1

这很可能是 "race condition"。

顶部的代码 ($( document ).ready()) 表示 "When the DOM is loaded, make server query. When server query responds, populate the HTML images."

您底部的代码显示 "When the DOM is loaded, start the slideshow with given images"。

虽然幻灯片代码应在 AJAX 请求触发后立即触发，但它将在在 AJAX 响应之前运行（某些极端情况除外).

因此，您在未填充的图像阵列上开始放映幻灯片。

两种解决方案：

1 在 AJAX 响应后，填充 HTML 并在该点开始放映幻灯片

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="js/jquery.easing.1.3.js"></script>
 <script src="js/jquery.animate-enhanced.min.js"></script>
 <script src="js/jquery.superslides.min.js" type="text/javascript" charset="utf-8"></script>
 <script>
  $( document ).ready(function() {
    $.ajax({
      url: "photo-list.php",
      dataType: "json",
      success: function (data) {
        $.each(data, function(i,filename) {
          $("#slides-foto-test").append("<img src='" + filename + "'>");
        });

        // Now trigger the slideshow script
        $('#slides').superslides({
          hashchange: true,
          play: 4000
        });
        $('#slides').on('mouseenter', function() {
          $(this).superslides('stop');
          console.log('Stopped')
        });
        $('#slides').on('mouseleave', function() {
          $(this).superslides('start');
          console.log('Started')
        });

      }
    }); 
  });
</script>

2 为什么不在 PHP 中生成 HTML，并在该点填充图像数组？节省服务器调用，为用户更快加载页面并消除竞争条件。

HTML 带有动态上传照片的照片幻灯片

HTML photo slideshow with dynamic uploaded photos

html

javascript

php

jquery

slideshow