Question

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

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

是否有任何开箱即用或可以遵循的教程？请记住，我不是互联网技术方面的专家（我为工作做桌面开发），我对PHP很熟练，但不熟悉JS ......

更新：这是我到目前为止所做的......这种方式不起作用！ Superslides未正确初始化（我认为它不计算正确数量的图像）。而且，首先没有最新照片的“优先级”队列。最后，图像列表不会以编程方式更新。

<!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>

这是 photo-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

这很可能是“竞争条件”。

顶部的代码（$( document ).ready()）显示“当加载DOM时，请进行服务器查询。当服务器查询响应时，填充HTML图像。”

底部的代码显示“当加载DOM时，启动带有给定图像的幻灯片”。

虽然幻灯片代码应该在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照片幻灯片

1 个答案: