2016-11-04 18 views
2

私は、Webページ(HTML、PHP、JS/jQuery)で使用する写真スライドショーを探しています。フルスクリーンとアニメーションだけでなく、多数の画像をサポートする必要があります。スライドショーでは、特定のフォルダ内のすべての画像を表示する必要があります。今はSuperslides(http://archive.nicinabox.com/superslides)を使用していますが、これはかなりうまくいきます。ダイナミックにアップロードされた写真付きのHTML写真スライドショー

しかし、ここに私の質問です。スライドショーはイベント中に投影され、指定したフォルダに画像を置くためのPHPスクリプトを既に開発しています。スライドショー(恐らくSuperslidesの改造版か、最初から新しいプロジェクトを作成する)は、最初にすべての新しい画像を表示し、最初に新しい画像がすべて表示されたら、新しい画像がアップロードされたかどうかを確認する必要があります。そうであれば、それが表示されます。それ以外の場合は、古い画像で1サイクルを開始する必要があります。新しい画像が追加されたかどうかを確認する前に、古い画像をすべて表示するべきではありません!それはスケジュールされたやり方で新しい画像をチェックすることができます。あるいは、「プッシュ通知」を受け取ることができます(これはJSで可能かどうか分かりません。

すぐに使えるものはありますか?私はインターネット技術の専門家ではないことを心に留めてください(私は仕事のためにデスクトップ開発を行います)、私はPHPにはかなり熟練していますが、JSではないことを覚えておいてください...

UPDATE:これは私がやっていることですこれまでのところ...これはうまくいかない! 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); 
?>  
+0

スタックオーバーフローは、ディスカッションボードではなくプログラミングの問題を解決するための場所です。 –

+2

私たちは猫を食べたい! – PiTiNiNjA

+1

あなたは入力から画像を取り込んでそれをスライダーに追加するためにjsが必要です – madalinivascu

答えて

2

これが最も可能性の高い "競合状態" です。

先頭のコード($(document).ready())は、「DOMがロードされると、サーバークエリを実行します。サーバークエリが応答すると、HTMLイメージが生成されます。

下のコードには、「DOMが読み込まれると、指定された画像でスライドショーを開始します」と表示されます。

AJAXリクエストが発生した直後にスライドショーコードが起動するのに対し、AJAXが応答する前により前に動作します(極端な場合を除く)。

したがって、未使用のイメージアレイでスライドショーを開始しています。


2種類の溶液:

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を生成し、画像を移入しませんその時点でアレイ?サーバコールを保存すると、ページがユーザーの方が速く読み込まれ、競合状態が解消されます。

+0

それは私の主な問題ではありません...問題は、スライドショーが新しく追加された画像に基づいて自動的に更新されるようにすることです(最初に表示する必要があります)。 – ufo

+0

とにかく、あなたは唯一の答えであるため、賞金を受け取る必要があります! – ufo

+0

ありがとうございます。私はドキュメントをすばやく確認しましたが、イメージが変更されたときにライブラリを「再読み込み」できるようにするものはありません。しかし、slidshow.update()があります - それを使用する方法の例については 'superslides_test.js'を見てください。私はこれがあなたが望むことをするかもしれないという名前で推測しています。 – Robbie

関連する問題