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


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


5 comments:

  1. Is there anyway to put a title on the images?? Thax.

    ReplyDelete
  2. @Jason Santoro
    Check out this tutorial ( http://www.stylifyyourblog.com/2011/08/implementing-jcarousel-captify-in.html )

    This is a combination of jCarousel and jCaptify Plugin which show the captions very beautifully under each image when hovered/rolled upon

    ReplyDelete
  3. @ShepherdFixed it and sorry for the inconvenience

    ReplyDelete
  4. Can we automate the animation ? Thks

    ReplyDelete