There are at present two themes developed by Padd Solutions using jCarousel as featured gallery: Masugid and Masipag. Though we released only two themes using the said feature gallery, we would like to share on how to integrate jCarousel to a Wordpress Theme which is used for the slideshow of featured posts.
The scope of this tutorial covers the list of Javascript files needed to run, adding the thumbnail generator script, returning posts which can be used as a featured post, and steps on how to modify the Wordpress theme files in order to add the function.
Requirements
jCarousel Plugin. Get this script from sorgalla.com. Tarball or ZIP file, take your pick.
TimThumb Script. You need this script created by Tim McDaniels and Darren Hoyt in order create a thumbnail of your image.
Any Wordpress Theme. Any Wordpress theme will do for the modification.
Step 1: Altering the Directory Structure
Under wp-content folder, create folder called tt-script. Under tt-script folder, paste the timbthumb.php file. Also, still under tt-script folder create a folder called cache.
Next, under your theme folder, create a folder named js (or whichever is convenient to you) and put your jCarousel Javascript file inside the said folder. Only the Javascript file, do not include the images and CSS files. We will deal it later.
Open the header.php file. Add the following code just before the end of the <head> tag.
<script type="text/javascript" src="<?php echo get_option('home'); ?>/wp-includes/js/jquery/jquery.js?ver=1.3.2"></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.jcarousel.js"></script>
Next, download the jcarousel.css CSS file and put the said file inside your preferred theme folder. See the list of files to be downloaded.
Then, download the jcarousel-images.zip file. The said file contains the images used for the jCarousel. Uncompress the file and put the jcarousel folder to images folder under your preferred theme. See the list of files to be downloaded.
Files to be downloaded
Step 2: Function Modifications
Under the function.php file in your preferred theme folder, there are two functions needed to render the featured gallery. The first function does the capturing of the first image of the post. I found this code at Cats Who Code website and modified by yours truly to meet the modification 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; }
Copy and paste this code to functions.php file. Then save your work.
The second function renders the list of featured posts. Though didn’t stated explicitly in the jCarousel manual, below is the required HTML snippet in order to get the featured gallery working:
<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>
All you have to do is to make the list dynamic to list down the recent featured posts in images. Given that we got the function to capture the first image of the post, below is the function to create a dynamic featured gallery.
/**
* 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();
}Copy and paste this code to the functions.php file. Then save your work.
Step 3: Getting to work
Open the index.php file. Add these lines of code just below the get_header() function, outside the PHP tag.
<div id="featuredcontent"> <?php theme_function_carousel(); ?> </div>
Next, open the header.php file. Add these lines of code just above the end of <head> 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>
Final Step
In order to get the jCarousel working, you have to add more post entries with images, at least four posts (Ideally, it should be multiples of three). After some post entry, go back to main page and reload, and jCarousel should be running.
some related plugins like this once you upload pictures seems to get stretched… the carousel plugin in woothemes..
thanks for the post
Nice tutorial. We can use this method for displaying related posts in WordPress and I’m sure that people will love it
thank you very much for the great tutorial.
Hello, I integrate your carousel in my Wordpress theme, but the images do not appear, I would like to know how to show? (I am a novice in English, sorry in advance for my mistakes)
I’m confused. You say that we should only put the JCarousel javascript file in the new folder named js. However, I’m not exactly sure what this file is, or where to find it. What’s it’s full file name? Where is it located?
Thanks!
Any reason you used get_option(‘home’) and get_template_directory_uri() instead of
bloginfo(‘url’) and bloginfo(‘template_directory’) ?
The former seems to be more readable. The bloginfo() function offers a lot of other standardized paths as well. Not a criticism, just thought your choices were interesting