Thailand Finance Business News and Lifestyle - SilomJournal.Com | How to integrate jCarousel into wordpress theme

From rag to finmin

By admin

Leisure

How to integrate jCarousel into wordpress theme

By admin ⋅ May 27, 2008 ⋅

Email this post ⋅

Print this post

It took me two weeks to finally understand how to embed jCarousel into my wordpress-powered site. Now that it works like a charm, I am going to try to share it with everyone.

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

jCarousel is also a functional blog tool that makes your site more dynamic and more attractive. It has been a feature in several wordpress premium themes. And it’s free.

Adding jCarousel into wordpress is quite easy. I wonder why no one writes tutorial about it–Googling

As a non-coder, the following directions are only a simple how to. I do not know if it is practical with every theme.

Instruction:

Download jCaruosel from here.
Open the header.php file and add the following codes between <head> and </head> tags.

<!– jQuery library –>
<script type=”text/javascript” src=”<?php bloginfo(’stylesheet_directory’); ?>/jcarousel/lib/jquery-1.2.3.pack.js”></script>

<!– jCarousel library –>
<script type=”text/javascript” src=”<?php bloginfo(’stylesheet_directory’); ?>/jcarousel/lib/jquery.jcarousel.pack.js”></script>

<!– jCarousel core stylesheet –>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_url’); ?>/jcarousel/lib/jquery.jcarousel.css” />

<!– jCarousel skin stylesheet –>
<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(’template_url’); ?>/jcarousel/skins/ie7/skin.css” />

Call the jQcarousel slide show to appear virtually anywhere on your website with the following scripts and basic html markups. (Carousel with auto scrolling and 5 images in the sequence. Other scripts can be obtained by go to the example page and, on IE, at the menu bar, simply click View >> Source.)

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(’#mycarousel’).jcarousel({
auto: 3,
visible: 5,
wrap: ‘last’,
initCallback: mycarousel_initCallback
});
});
</script>

Now that you have to pull images to show on the slide with simple HTML markups just like these.

But I would like to pull images from my posts under the Featured category using custom field. So I change the codes to:

<?php $the_query = new WP_Query(’category_name=featured&showposts=1&offset=1′); while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID; ?>

<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><img src=”<?php bloginfo(’stylesheet_directory’); ?>/images/uploads/<?php echo get_post_meta($post->ID, “featured_home_img”, $single = true); ?>” alt=”<?php the_title(); ?>” /></a>

<?php endwhile; ?>

And it will looks like this:

<li>
<?php $the_query = new WP_Query(’category_name=featured&showposts=1&offset=1′); while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID; ?>
<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><img src=”<?php bloginfo(’stylesheet_directory’); ?>/images/uploads/<?php echo get_post_meta($post->ID, “featured_home_img”, $single = true); ?>” alt=”<?php the_title(); ?>” /></a>
<?php endwhile; ?>
</li>
<li>
<?php $the_query = new WP_Query(’category_name=featured&showposts=1&offset=2′); while ($the_query->have_posts()) : $the_query->the_post(); $do_not_duplicate = $post->ID; ?>
<a href=”<?php the_permalink(); ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><img src=”<?php bloginfo(’stylesheet_directory’); ?>/images/uploads/<?php echo get_post_meta($post->ID, “featured_home_img”, $single = true); ?>” alt=”<?php the_title(); ?>” /></a>
<?php endwhile; ?>
</li>
<li>
.
.
.
</li>
</ul>

You can add as many posts as you wish. Avoided post duplicated by simply changing the number after &offset=1 to 2,3,4… according to the list.
This will be a long list if you want many images appearing on the slide. So open a new file e.g. carousel.php and call it with this code:

<?php include (TEMPLATEPATH . ‘/carousel.php’); ?>

It will look like this:

Lastly, control your carousel layout with the CSS:

#mycarousel {
float: left;
width: 450px;
text-align: center;
}

#mycarousel ul {
list-style: none;
}

#mycarousel li {
float: left;
display: block;
}

#mycarousel li a {
color: #FFF;
}

#mycarousel li a:hover{color:#CCC;}

Actually, the above CSS is almost unnecessary. jCarousel has its own CSS in the skins folder, but this will give it a more proper width and format to your page.

Tags: jcarousel

Discussion

Comments are disallowed for this post.

Comments are closed.

Disclosure Policy