Question

I’m using PHP to echo out 50 video id’s from an XML file. I use the video id’s to embed 50 YouTube videos into my website. This works fine but I need to isolate the videos two at a time. I don’t want the user to see all fifty videos at once. I want them to see two, then click next, see another two, then maybe click back, etc. etc.

Here’s what I have so far:

$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 />";

}

So I think the best thing to do is echo all fifty items to the page inside divs labeled 0 to 49…then use JavaScript to hide all divs except 0 and 1 until you click a next button and it switches to hiding everything except 2 and 3…and so on…

But I’m not sure how to do that in JavaScript/jQuery. I think using .show() and .hide() would work but I’m not sure of the syntax.

Answer 1

You can use the following HTML structure:

    <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>

Note: Use the active class only in the first video row to show them by default on the page load.

With CSS, hide all .video-row (using: display:none;) and show only .video-row.active (using: display:block;).

Finally, use the following Javascript (jQuery needed) to navigate between video rows:

    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');
      }
    });