Wordpress Loop integrated with jQuery

So this is kind of hard to explain in text, I have attached an image to go wi开发者_Go百科th it so it should make a bit more sense!

Basically, I want to show recent posts in a line. They will be displayed via the_post_thumbnail.

When you click on a thumbnail, above it a div will become unhidden and will slide the content down to reveal information about the thumbnail clicked. If you click the next thumbnail, the current div will slide back up and hide, and then another hidden div will slide down and show the information for the next thumbnail.

http://lifestyletrader.com/jqueryidea.jpg

I really have no idea how to go about doing this, so any help would be greatly appreciated with upvotes :D!

---

Maybe you can use some of the jquery plugins for creating galleries, like AD Gallery?

Hopefully It will need only some tweak to adjust it to your needs.

See this AD Gallery example and tell me if something like this is what you need.

---

In the example you posted it seems that the HTML for all the posts is built on a secondary page (found here) which is included in the main collapsible div. That div has its height set to 0 and whenever you click on a thumbnail from below:

1. The internal content is moved to the correct position (probably based on an id retrieved from the clicked thumbnail)

2. The div is expanded using something like jQuery animate()

If it's already expanded; it's collapsed using animate, the content is moved to the new position, then it is re-expanded.

Now to take this back to the WordPress loop I suppose you could do one of two things:

1. Use the loop to build a similar structure where you load all posts and build large "focus" blocks for them and hide them (like this example) then show the relevant one once its thumbnail is clicked

2. Use the loop to build the thumbnails, and set the wordpress post id as each thumbnail's id, then asynchronously reload the large section of the page using ajax. This is probably harder, but more efficient, and I'm not exactly sure how to do it. :)