1

PHPを実装したHTML5スライドショーシステムを作ろうとしています。私のアイデアは、フォルダー内の画像を検出し、それらを配列に配置するシステムを作成することから始まります。これにより、jquery は、スライドショーでの実装のためにアクセスできるようになります。まず、フォルダー内のすべてのファイルの名前を検出し、それらをプレーンテキストとして出力するphpファイルがあります。

プレーンテキストとして出力する代わりに、PHP にファイル名を数値配列に転送させるにはどうすればよいですか?

jquery を使用して、作成された数値配列にアクセスするつもりです。これはどのように行われますか？それが不可能でない限り、それ以外にどのようにそれを行うことができますか?

目標は、ファイルをフォルダーに入れ、スクリプトがファイルの存在を動的に認識し、それらをスライドショーに組み込むことができるようにすることです。このスライドショーは、待機エリアで使用されるスクリーン ディスプレイに出力され、学校に関する画像のスライドショーで学校を紹介します。

これが私がこれまでに持っているコードです:

<?php
    //Open images directory
    $dir = opendir("images");
    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        echo "filename: " . $file . "<br />";
    }
    closedir($dir);
?>

この時点で、PHP を Javascript と「対話」させる方法がわかりません。これには簡単な方法があることを願っています。私が目指しているのはAJAXですが、これがどのように機能するのかわかりません。

4

7 に答える 7

5

ここでの答えは、多くの言語でサポートされている Javascript のサブセットであるJSONを使用することです。これにより、外部ソースから構造化データを Javascript に非常に簡単に渡すことができます。PHP には、json_encode()PHP のデータ構造 (通常は配列またはオブジェクト) を Javascript が読みやすい形式に変換できる機能があります。jQuery には、JSONのサポートも組み込まれています。

<?php

    // An array of the image file names
    $images = array();

    //Open images directory
    $dir = opendir("images");

    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        $images[] = $file;
    }
    closedir($dir);

    echo json_encode($images);

?>

さて、jQuery でこれを行うことができます。

$.getJSON('http://url/of/your/script.php', function(images) {
  // In here the variable "images" is an array identical to the one you constructed with PHP
});
于 2012-05-16T14:36:42.897 に答える
2

はい、次のようにphpコードを変更することにより、ajaxを使用して画像ファイル名を配列として取得できます

<?php
    //Open images directory
    $dir = opendir("images");
    $images = array(); 
    //List files in images directory
    while (($file = readdir($dir)) !== false)
    {
        //echo "filename: " . $file . "<br />";
        $images[] = $files;
    }
    closedir($dir);
    echo json_encode($images);
?>

次に、$.getJSONを使用してそのリストを取得します

    $.getJSON('path_to_above_php_file', function(images) {
       //all your files are in images array, you can loop through it to find individual files
   });
于 2012-05-16T14:40:23.970 に答える
0

これを行うにはいくつかの方法があります。すばやく簡単な方法は次のとおりです。

あなたのphp：

$dir = opendir("images");
$store = array();
while (($file = readdir($dir)) !== false)
{
    $store[] = $file;
}
closedir($dir);

これで、すべてのファイルの配列ができました（ファイルが画像であることを検証したい場合があります！）。私はそれらをjson文字列としてJSにダンプするのが好きです。それで：

echo "<script> var allimages = jQuery.parseJSON('".addslashes(json_encode($store))."'); </script>";

これでconsole.log()、allimages変数を使用すると、その中にすべての画像があることがわかります。必要に応じて、「$。each」などを使用できます。

于 2012-05-16T14:41:07.270 に答える
0

すべての写真を含む配列を作成し、この配列を JSON に変換できます。

于 2012-05-16T14:36:43.320 に答える
0

単に画像の名前を保存するのではなく、画像自体をドキュメントに書き込んでみませんか? 次のようなものです：

<?php
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
    $files[] = YOUR_URL_PATH.$file;
}
closedir($dir);
?>
...
<div id="slideshow">
<?php
foreach($files as $img)
    echo '<img class="slide" src="'.$img.'" />';
?>
</div>
...
<script type="text/javascript">
$(document).ready(function()
{
    alert($(".slide").length+" slides detected");
});
</script>

そうすれば、PHP に依存して jQuery を定義する代わりに、PHP を使用して、jQuery が適切に機能するために必要な要素を定義できます。

アップデート：

PHP と Javascript が同じページに存在し、PHP を使用して Javascript 配列を設定できるようにしたい場合は、これが探しているものだと思います。

<?php
//Open images directory
$dir = opendir("images");
//List files in images directory
while (($file = readdir($dir)) !== false)
{
    $files[] = YOUR_URL_PATH.$file;
}
closedir($dir);
?>
...
<script type="text/javascript">
$(document).ready(function()
{
    var fileArr = [<?php echo implode(',',$files); ?>];
});
</script>

これには、ファイル配列を定義する PHP と同じページに Javascript が存在する必要があります。Javascript が外部から参照されることを意図している場合、他の多くの回答で言及されているように、JSON 配列を使用することをお勧めします。

于 2012-05-16T14:38:43.430 に答える
0

JSONはあなたの状況によく合っていると思います。ファイルのリストを含む JSON オブジェクトを出力 (エコー) する PHP ファイルを作成するだけです。json_encode()を使用して JSON オブジェクトを作成できます。ブラウザ側で AJAX リクエストを作成 (または単純にjQuery.getJSON()を使用) し、データ型を JSON に設定すると、準備完了です。

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

ここでは、PHP での JSON の使用について読むことができます。

于 2012-05-16T14:39:24.143 に答える