Implementing jCarousel in Blogger

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).

             

Steps to Add it to Blogger:

1.Login to the Blogger account.

2.Go to the Post/Page you want to add jCarousel and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jCarousel/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jCarousel/jquery.jcarousel.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/27675057/jCarousel/skin.css" /> 
<script type="text/javascript"> 
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
    jQuery('#mycarousel1').jcarousel({
        vertical: true,
        scroll: 2
    });
});
 
</script> 

4.Now for adding the images into jCaousel ,these are the codes:

<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="s.jpg" width="75" height="75" alt="" /></li>
<li><img src="s.jpg" width="75" height="75" alt="" /></li>
</ul>

The id name should be same as the javascript snippet name. 


If you want to add a vertical jCarousel then make the following changes to the javascript snippet.

<script type="text/javascript"> 
 jQuery(document).ready(function() {
 jQuery('#mycarousel1').jcarousel({
        vertical: true,
        scroll: 2
    });
});
 </script>

5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox  or Blogpsot itself !


Another Important thing to note is that all the images used in this tutorial like Next button ,Previous button ,etc are all hosted on Google Code service which are the fastest and most reliable servers on the internet with the least downtime.So you can easily implement this with no hassles for Image Hosting.

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox