Today I would like to explain the way of how to integrate jCarousel into a WordPress Theme for various purposes like slideshow and featured posts rotation.

Here you will find the list of Javascript files required, the script of thumbnail generator, the tips of how to return posts for the future use as a featured posts, how to change the code of WordPress theme files for adding this feature.

jcarousel example

Requirements

jCarousel Plugin. You can download it at sorgalla.com. Choose Tarball or ZIP file, as you wish.
TimThumb Script. This script from Tim McDaniels and Darren Hoyt ideally suits your needs.
Any WordPress Theme. Feel free to use any WordPress theme you like. You can take wordpress themes here

Step 1: Directory Structure Changes

In wp-content directory you should create a new folder and name it as tt-script. Place timbthumb.php file into tt-script folder. Also, create a folder named cache in tt-script directory.

Then create js folder in your theme directory (or elsewhere you want) and place jCarousel Javascript file into it. Be attentive: there must be ONLY Javascript file, without any CSS or image files.

Open the header.php file. Include the next code right before the <head> tag is closed.

<script src="<?php echo get_option('home'); ?>" type="text/javascript"><!--mce:0--></script>
<script src="<?php echo get_template_directory_uri(); ?>" type="text/javascript"><!--mce:1--></script>

Download and place jcarousel.css file to your theme folder.

In jcarousel-images.zip file you will find the images that will be uploaded to the jCarousel. Open the archive and place the jcarousel directory to images folder under your theme.

Step 2: Modifying the Functions

function.php file needs to be improved a little . Here you will see the correct code that was found at Cats Who Code site and slightly modified for our needs.

/**
 * Capture the first image from the post.
 * @global object $post
 * @global object $posts
 * @return string
 */
function theme_function_capture_first_image($p=null) {
	$firstImg = '';
	if (empty($p)) {
		global $post, $posts;
		$firstImg = '';
		ob_start(); ob_end_clean();
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$firstImg = $matches[1][0];
	} else {
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $p->post_content, $matches);
		$firstImg = $matches[1][0];
	}
	return $firstImg;
}

All you need to do is to copy this code to functions.php file. Don’t forget to save the changes.

Other function we need is rendering the list of featured posts. While jCarousel manual doesn’t have clear instructions, here is the HTML part code that makes the featured gallery to run correctly:

<ul id="mycarousel" class="jcarousel-skin">
	<li><img src="img1.jpg" alt="Image 1" /></li>
	<li><img src="img2.jpg" alt="Image 2" /></li>
	<li><img src="img3.jpg" alt="Image 3" /></li>
	<li><img src="img4.jpg" alt="Image 4" /></li>
	<li><img src="img5.jpg" alt="Image 5" /></li>
</ul>

The next you will see a function that makes a featured gallery dynamic.

/**
 * Renders the featured images in home page in carousel.
 */
function theme_function_carousel() {
	wp_reset_query();
	$category_id= 1; // Assuming that the category number of "Featured Gallery" is 1. Change the category ID when needed.
	$limit = 6; // Number of posts to be shown at a time. Ideally it should be multiples of 3.
	query_posts('showposts=' . $limit. '&cat=' . $category_id);
	$generator = get_option('home') . '/wp-content/tt-script/timthumb.php?';
?>
<ul id="carousel" class="jcarousel-skin">
<?php while (have_posts()) : the_post(); ?>
	<?php
		$img = $generator . 'src=' .  theme_function_capture_first_image() . '&w=191&h=191&zc=1';
		$src = get_permalink();
	?>
	<li><a href="<?php echo $src; ?>"><img src="<?php echo $img; ?>" alt="" /></a></li>
<?php endwhile; ?>
</ul>
	<?php
	wp_reset_query();
}

This code should be inserted into functions.php file. Save the changes.

Step 3: Final Changes

Open the index.php file. The following lines should be pasted below the get_header() function, outside the PHP tag.

<div id="featuredcontent">
	<?php theme_function_carousel(); ?>
</div>

Open the header.php file. Insert the next lines above the tag.

<script type="text/javascript">
function paddCarouselInit(carousel) {
	// Disable autoscrolling if the user clicks the prev or next button.
	carousel.buttonNext.bind('click', function() {
		carousel.startAuto(0);
	});
 
	carousel.buttonPrev.bind('click', function() {
		carousel.startAuto(0);
	});
 
	// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(
		function() {
			carousel.stopAuto();
		},
		function() {
			carousel.startAuto();
		}
	);
}
jQuery(document).ready(function() {
	jQuery.noConflict();
 
	jQuery('ul#carousel').jcarousel({
		auto: 6,
		wrap: 'last',
		initCallback: paddCarouselInit
	});
});
</script>

To see jCarousel in work, add more images (at least four posts). Ideally the number of entries should be multiple of three.

Enjoy!

Post Tags: , , , , ,

Related Posts

Most Commented Posts

Like this post? Spread it!