Scroll Images with jQuery in blogger

Scroll Images with jQuery in blogger

jCarousel is a jQuery plugin used widely for controlling list of items (both images, videos or text) in horizontal or vertical order. The items can be scrolled back and forth with animation. The carousel can be used either as image scroller or textscroller. It can be controlled externally with both JavaScript and AJAX and of course php. So it's a smart coded plugin that can be altered with all possible jquery functions. Its created by Jan Sorgalla and you can see several versions of here by visiting Sorgalla' website. To keep things simple we have filtered the code, compressed  it and made it as small as possible. You can easily customize it and install it on your BlogSpot blogs with just a single copy and paste of the code we would share today. You can use the same code to install it on any blogging platform may it be Joomla, wordpress or even a Static HTML website. Lets get to work 

We are sharing here only the horizontal style though these images can be scolled in vertical direction too. You can create that easily if you understand this tutorial. If incase you could not understand how to do it then let us know and we would publish a new tutorial on it. Lets install it on your blog now.

1. Go To Blogger > Layout
2. Click Add a Gadget
3. Choose HTML/JavaScript widget
4. Paste the following code just inside it

​​​ <script src='http://code.jquery.com/jquery-latest.js'></script>

<script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script>
<script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script>
  <style>

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
   border-radius: 10px;
    background: #F0F6F9;

}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
   width:425px;     padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  425px;     height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
*  Vertical Buttons
*/
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-vertical:focus {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

  </style>

  <ul id="mycarousel" class="jcarousel-skin-tango">
   <!-- code by http://dailybloggiingtips.blogspot.com/ -->

<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>
   

<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>

<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>  

  </ul> 

Make these changes:

• Replace IMAGE LINK with the image URL of your thumbnail image.
• Replace Description with at most a three-word description of the image so that search engine robots could crawl your image well.
• Clicking an image will take user to the desired page. Replace # with that Page URL for each image.
• To change the widget width edit width:425px; 
• To change the image clips width (Combined length of all images)  editwidth:425px; 

To add an extra image just repeat this code:

<li><a href="#"><img src="IMAGE LINK" width="75" height="75"alt="Description" /></a></li>

          5.   Save the widget and you are all done!