Ever since I started to explore WordPress, I like to implement all sort of JQuery plugin. Testing and experimenting it to work the way I would like to. The best thing about WordPress is because the ease of include any kind of plugin with it and make it work the way you want!

Recently I find a great JQuery plugin – ContentFlow. The effect is simply awesome, and not to mention the small file size it has to enable me to implement a lot more JQuery altogether with it.

The best thing I find about ContentFlow is that it doesn’t really has external style sheet as it will get from its own directory. Been spending nights looking for a better and easier slider, bet the best eye cream couldn’t help me anymore, but it all worth it!

Now the idea of this implementation is, list the attachment of a post in ContentFlow style. Basically you’ll upload all the necessary images when publishing a post, those images will automatically shows in CoverFlow (ContentFlow plugin) style.

First, show the attachment. Not by gallery shortcode, but hand code it. I got this hack from Digging into WP, it shows a list of great recipes on image and attachment:

<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => 0,
'post_status' => null,
'post_parent' => $post->ID
);
$images = get_posts($args);
if ($images) {
foreach ($images as $image) {
$attlink  = wp_get_attachment_url($image->ID);
echo '<a href="'.$attlink.'" class="item"><img class="content" src="'.$attlink.'" alt="Flow" title="Flow" /></a>';
}
}
?>

Do take a short trip to ContentFlow documentation for more information about the required classes like .item and .content.

Add in the plugin on header:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/contentflow.js" charset="utf-8"></script>

So the overall code on the loop should look like this:

<div id="contentFlow" class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>

<div class="flow">

<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => 0,
'post_status' => null,
'post_parent' => $post->ID
);
$images = get_posts($args);
if ($images) {
foreach ($images as $image) {
$attlink  = wp_get_attachment_url($image->ID);
echo '<a href="'.$attlink.'" rel="lightbox-cats" class="item"><img class="content" src="'.$attlink.'" alt="Advertiser" title="Advertiser" /></a>';
}
}
?>

</div>

<div class="globalCaption"> </div>
<div class="scrollbar">
<div class="slider"><div class="position"></div></div>
</div>
</div>

I placed it as the feature slider on top of the page. I’ve placed lightbox together with it too. Looks alright don’t it?

P/S: That is how dull my framework look like