WordPress / jQuery – Video Category Showcase with jQuery

1 Views

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.

Read More

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:

enter image description here

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

Post Views: 1

Related posts

Leave a Reply

2 comments

  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.

  2. this one is not elegant as the one before but how about using 2 loops? one shows the last post in full and the other omits the last post and shows everything else in right order? it might take more resources but if it’s not big site i think it’s the easiest way.