帶有動態上傳照片的HTML照片幻燈片

我正在尋找在網頁（HTML，PHP和JS/jQuery）中使用的照片幻燈片。它應該支持全屏和動畫以及大量的圖像。幻燈片應該顯示特定文件夾中的所有圖像。到目前爲止，我正在使用Superslides（http://archive.nicinabox.com/superslides），這很好。帶有動態上傳照片的HTML照片幻燈片

但這是我的問題。該幻燈片將在事件期間進行投影，並且我已經開發了用於照片上傳的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>

這是照片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); 
?>

來源

2016-11-04 ufo

堆棧溢出是幫助編程問題的地方，而不是討論板。 –

我們想要代碼吃bro！ – PiTiNiNjA

你需要js從輸入圖像並將其附加到滑塊 – madalinivascu

這是最有可能是「競態條件」。

您在頂部的代碼（$(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，並填充圖像陣列在那一點？保存服務器調用，爲用戶加載頁面更快，並消除競爭條件。

來源

2016-11-16 00:22:54 Robbie

這不是我的主要問題......問題是我想要幻燈片自動根據新添加的圖像自動更新（必須先顯示它們）。 – ufo

無論如何，你應該得到賞金，因爲你是唯一回答的人！ – ufo

謝謝。我很快查看了文檔，沒有什麼可以讓圖書館在圖片更改時「重新加載」。然而，有一個slidingshowe.update（） - 查看'superslides_test.js'來查看如何使用它。我用名字猜測這可能會做你想做的事。 – Robbie

帶有動態上傳照片的HTML照片幻燈片

回答

相關問題