Using jQuery Tools to show Posts

The folks who produce Flowplayer, which by the way now deals nicely with HTML 5 video, have also produced  a series of tutorials covering the use of jQuery tools. These can be fairly easily adapted to display posts from a category in WordPress. I’ve shown some examples above.

In each case I’ve made a template for the jQuery method replacing the loop by a call for the posts from the category and using the_title() for the menu and the_content() for the content.  Just to show that this works with all post content, the ‘delta’ post is a Flowplayer video.

<!-- the tabs -->
<ul>
<?php
global $post;
$myposts = get_posts('posts_per_page=5&category=35&order=ASC');
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><a href="#"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

<!-- tab "panes" -->
<div>
<?php
global $post;
$myposts = get_posts('posts_per_page=5&category=35&order=ASC');
foreach($myposts as $post) :
setup_postdata($post);
?>
<div><?php the_content(); ?></div>
<?php endforeach; ?>
</div>

<!-- This JavaScript snippet activates those tabs -->
<script>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
});
</script>

This approach can be adapted for all the jQuery tools described at flowplayer.org/tools/