2

PHP を使用して、XML ファイルから 50 個のビデオ ID をエコーアウトしています。ビデオ ID を使用して、50 個の YouTube ビデオを自分の Web サイトに埋め込みます。これは問題なく動作しますが、一度に 2 つのビデオを分離する必要があります。ユーザーに一度に 50 本の動画をすべて見せたくありません。私は彼らに2つ見て、次にクリックして、別の2つを見て、そして戻ってクリックしてもらいたい.

これが私がこれまでに持っているものです：

$url = "http://www.theURLofmyXML.blah";
$xml = simplexml_load_file($url);
$i = 0;

while ($i < 49) {

$title = (string) $xml->query->results->item[$i]->title;
$videoid = (string) $xml->query->results->item[$i]->id;
$explanation = (string) $xml->query->results->item[$i]->explanation;

$i = $i + 1;

echo $title."<br />";
echo '<iframe width="400" height="225" src="http://www.youtube.com/embed/'.$videoid.'?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br/>';
echo $explanation."<br /><br />";

}

したがって、0 から 49 のラベルが付いた div 内のページに 50 個のアイテムすべてをエコーするのが最善だと思います。次に、JavaScript を使用して 0 と 1 以外のすべての div を非表示にし、次のボタンをクリックすると 2 以外のすべてが非表示に切り替わりますそして3...など...

しかし、JavaScript/jQuery でそれを行う方法がわかりません。.show() と .hide() を使用するとうまくいくと思いますが、構文がわかりません。

4

3 に答える 3

2

正直なところ、1 ページに 50 個の動画が埋め込まれていることは、目に見えるかどうかに関係なく、あまり良くないと思います。表示されていなくてもブラウザによって処理されるためです。(私が間違っている場合はお気軽に修正してください。ただし、ブラウザーは DOM 全体を表示して処理し、「隠し」ビットにスタイルを適用するだけです。)

Gustavo Straube は、ブラウザーと帯域幅の両方に影響を与える可能性があるにもかかわらず、DOM に 50 個の要素を配置したい場合に、これを行う方法について非常に良い答えを出しています。

おそらく、XML を解析し、すべてのデータを JSON として保存し、Mustache.js などのテンプレート フレームワークで提供される HTML から jQuery を使用して DOM を動的に更新するという行に沿って、さらに何かを行うでしょう。

/* Generate JSON */
$url = "http://www.theURLofmyXML.blah";
$xml = simplexml_load_file($url);
$i = 0;
$json = array();

while ($i < 49) {

$arr['title'] = (string) $xml->query->results->item[$i]->title;
$arr['videoid'] = (string) $xml->query->results->item[$i]->id;
$arr['explanation'] = (string) $xml->query->results->item[$i]->explanation;

$json[] = $arr;
}

echo json_encode($json);

次に、マークアップに以下のようなものを用意して、最初の x ビデオを初期化します - この例では 10..

$(document).ready(function(){
    var template = '{{$title}}<br /><iframe width="400" height="225"'
       + 'src="http://www.youtube.com/embed/{{$videoid}}?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br/>'
       + '{{explanation}}<br /><br />';
    var html = '';
    var i=0;

    for(; i<10; i++){
        var item = json[i];
        html += Mustache.to_html(template, item);
    }
    $('#videos').html(html); //where #videos is a div to contain your videos

次に、次の 10 個のビデオを取得するためのアンカー (この例では #next) を用意します。

    $('#next').click(function(){
        /* template, i and json are still in scope! */
        var j = i+10;
        for(; i<j; i++){
            var item = json[i];
            html += Mustache.to_html(template, item);
        }
        $('#videos').html(html); //where #videos is a div to contain your videos
    });

これの利点は、以前のアンカーも簡単に実行できることです...

    $('#prev').click(function(){
        /* template, i and json are still in scope! */
        var j = i -10;
        i -= 20; //10 for the current page, 10 for the start of the previous page
        for(; i<j; i++){  //rebuild div content of previous page
            var item = json[i];
            html += Mustache.to_html(template, item);
        }
        $('#videos').html(html);
    });

繰り返しになりますが、これは別の解決策です。JSON を使用すると、XML よりも軽量で柔軟性があり、使用されていない 50 個の DOM 要素を使用する必要がなくなります。一度。あなたが持っている実装を選択したのには理由があるかもしれませんが、この問題が発生した場合に私が採用する実装ではありません!

于 2012-07-02T16:11:27.257 に答える
2

次の HTML 構造を使用できます。

    <a href="#" class="prev-video-row">Previous videos</a>
    <div class="video-row active">
      <!-- First couple videos -->
    </div>
    <!-- Loop through all videos, writing the other rows -->
    <div class="video-row">
      <!-- Last couple videos -->
    </div>
    <a href="#" class="next-video-row">Next videos</a>

注:activeページの読み込み時にデフォルトで表示するには、最初のビデオ行でのみクラスを使用します。

CSS では、すべて非表示.video-row(使用: display:none;) と表示のみ.video-row.active(使用: display:block;)。

最後に、次の Javascript (jQuery が必要) を使用して、動画の行間を移動します。

    jQuery('.prev-video-row').click(function (event)
    {
      event.preventDefault();
      var prev = jQuery('.video-row.active').prev();
      if (prev.length)
      {
        jQuery('.video-row').removeClass('active');
        prev.addClass('active');
      }
    });
    jQuery('.next-video-row').click(function (event)
    {
      event.preventDefault();
      var next = jQuery('.video-row.active').next();
      if (next.length)
      {
        jQuery('.video-row').removeClass('active');
        next.addClass('active');
      }
    });
于 2012-07-02T15:48:48.130 に答える
1

次のようなhtmlの場合：

<div id="section0"></div>

jquery は次のようになります。

$(document).ready(function() {
    $('#section0').show();
    $('#section1').show();

    $('#nextButton').click(function(e){        
        e.preventDefault();
        $('#section0').hide();
        $('#section1').hide();
        $('#section2').show();
        $('#section3').show();
        return false;
    }
});

等々...

于 2012-07-02T15:43:53.187 に答える