Question

I am working on a website for a client and they have an interesting requirement that I haven’t been able to figure out.

Basically, one of their Post Categorys is for Videos, and they regularly post new videos in that category. Each video post has a Featured Thumbnail set.

On their video page, they would like to display thumbnails for every post in the category (thats the easy part, can be done with a custom query) – however at the top of the page, they want to have 1 full post displayed. If a user clicks on one of the thumbnails, it will display the video for that thumbnail at the top of the page, in place of whatever was already there. Does that make sense?

Here is a mockup of how the page is laid out:

So I need to use jQuery to basically load the full video at the top of the page, when a thumbnail is clicked – the full video is just a WordPress post, so its a case of “when thumbnail id x is clicked, display corrosponding post in div id=”full-video”

Any ideas how to do this?

Thanks so much
Zach

Answer 1

You’ll have to make a request to the server that returns the post content. Something akin to this:

<javascript>
function getVideo(data) {
  $.get(URL_THAT_RETURNS_CONTENT, 
    function (data) {
      $("#full-video").html(data)
    }
  );
}

$(".video-thumb").click(getVideo)
</javascript>

Then on the Server side, something like so:

data = get_content($_GET['lookup_post']);
echo data;

I don’t remember the exact code off the top of my head, but that should get the idea across.