Thailand Finance Business News and Lifestyle | SilomJournal.Com » jcarousel http://silomjournal.com Thailand Finance Business News and Lifestyle Sat, 31 Jul 2010 03:45:24 +0000 http://wordpress.org/?v=2.8.1 en hourly 1 How to integrate jCarousel into wordpress theme http://silomjournal.com/leisure/how-to-integrate-jcarousel-into-wordpress-theme/ http://silomjournal.com/leisure/how-to-integrate-jcarousel-into-wordpress-theme/#comments Tue, 27 May 2008 16:59:43 +0000 admin http://silomjournal.com/?p=130 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.)

<script type=”text/javascript”>
function mycarousel_initCallback(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(’#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.

<ul id=”mycarousel” class=”jcarousel-skin-ie7″>
<li><img src=”http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/75/199481072_b4a0d09597_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/57/199481087_33ae73a8de_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/77/199481108_4359e6b971_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/58/199481218_264ce20da0_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/69/199481255_fdfe885f87_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg” width=”75″ height=”75″ alt=”" /></li>
<li><img src=”http://static.flickr.com/70/229228324_08223b70fa_s.jpg” width=”75″ height=”75″ alt=”" /></li>
</ul>

  • 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:

<ul id=”mycarousel” class=”jcarousel-skin-ie7″>

<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:

<script type=”text/javascript”>
BLAH BLAH BLAH
BLAH BLAH BLAH
BLAH BLAH BLAH
</script>
<?php include (TEMPLATEPATH . ‘/carousel.php’); ?>

  • 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.
]]> http://silomjournal.com/leisure/how-to-integrate-jcarousel-into-wordpress-theme/feed/ 0