0

スライドショー 2 (http://www.electricprism.com/aeron/slideshow/) を使用して、Web サイトにいくつかの写真を表示しています。問題は画像の数であり、それらの場所は JavaScript コードにハードコードする必要があります。

（phpファイル出力からの）配列を使用し、何らかの方法で「varデータ」に新しい値を割り当てて、毎回手動で更新する必要なくフォルダー内のすべての画像が表示されるようにします。何か案は？

<script>
        window.addEvent('domready', function(){


            var data = { '5.jpg': { caption: '1' }, '2.jpg': { caption: '2' }, '3.jpg': { caption: '3' }, '4.jpg': { caption: '4' }};

            new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });

        });
    </script>
4

1 に答える 1

0

PHP を使用している場合は、これを簡単に行うことができます。

たとえば、すべてのファイルを次のような配列に取得するロジックがあるとします。

$foo = Array("2.jpg" => "2", "3.jpg" => "3");

ファイル名とキャプションを表す

その後、次のことができます。

<?php echo json_encode($foo); ?>

それを出力します。

js ブロック内で変数に出力する場合:

var data = <?php echo json_encode($foo); ?>;

実際には次のようにレンダリングする必要があります。

var data = [{"2.jpg": "2"},{"3.jpg": "3"}];

また、あなたの例では、実際には配列を使用せず、オブジェクトを使用していることに注意してください。かなりの違いがあります。出力では、オブジェクトの配列を取得することをお勧めします。次のようにループします。

Array.each(data, function(img) {

});

ただし、キーは動的であるため、反復が困難になり、プロパティを取得する必要がありObject.eachます。より良いデータ構造は次のようになります。Object.keysfor (var key in obj) {}

$foo = Array(Array("name" => "2.jpg", "caption" => "two"), Array("name" => "3.jpg", "caption" => "three"));

つまり、js ループでは、次を参照できます。

Array.each(data, function(img) {
    img.name; // filename
    img.caption; // title    
});
于 2012-04-12T09:11:44.943 に答える