jCarousel Plugin- Scroll Images with jQuery in blogger

jcarousel image scroller

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


Live Demo

Why use it?

You can use it to showcase your photos, ebooks,  icons, products, or even thumbnails of your featured posts. So it serves multi-purpose, it can be used as a featured post widget and also as a scrolling image gallery. You can add it on your sidebar, header, post body, footer, almost anywhere you want. The installation has been made extremely easy. All it aims is at increasing pageviews and page impressions. 

Installation

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

<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)  edit width: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!

Visit your blog to see it working just perfectly. :) To control where to show and hide the image scroller please read:

Your views?

If you need any help, then the early you post your question the quicker you get a reply. Please let us know what variations would you like in this widget and feel free to ask questions related to any customization help.

Most of you complained that we have stopped publishing tutorials on blogger and we are focusing more on Affiliate Sales and Make Money niche, therefore in order to revive the spirit I will be publishing tutorials based on widgets and plugins only.  The remaining two authors would be responsible for publishing tutorials on earning methods so that you get a spice of every flavor. Take good care of your selves buddies. Peace and blessings! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Greetings Mohammad!! Thanks so much for this post. I have been looking for this information for quite some time....but was unable to locate information about this widget. Hopefully I can get it all worked out. Your blog is fantastic and I look forward to reading more.

    wishing you all the very best

    Jaelma
    http://www.mytshirttalk.com
    http://www.kiarablu.com

    ReplyDelete
  2. Great Muhammad Bhai!
    But Please Tell Me how to create html code block for pasting html code in it.
    Like in MBT!

    Please Bhai!

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. @Hammad Ansari,


    Its just a blockquote customization pal. .Just go to your blogger dashboard --> Edit Html --> find #blockquote and define a background image to it specifying the url of image which you would have created using photoshop and finally adjust the paddings and margins.

    ReplyDelete
  5. mohammad what about my guest post i sent plz reply i am so eager

    ReplyDelete
  6. bro you have no need to post plugin daily.your every post is unique and helpful.you have already post best widjet. bro can you tell me how do you create these beatiful images?

    ReplyDelete
  7. Mohammad, I would appreciate an answer to my request for help in your earlier J-query.
    http://www.mybloggertricks.com/2011/06/jquery-image-slider-for-blogger-v3.html

    It's the best I've seen so far. If I could only get it to work!!!

    Here (http://hipcooking.blogspot.it/) is where I tried to install it.

    The "sticky post only on the home-page" part of the script works, and so does the "suck in the URL's from thee side-bar HTML with IMAGES part", but it's not ACTUALLY sliding! It just spits everything out.

    Thanks!

    L

    ReplyDelete
  8. Hi Muhammad Bhai!
    It's Great but my problem is another sliders before is not running after put this sliders

    Here (http://hanibabyproduct.blogspot.com/) is where I tried to install it

    Thank You So Much in Advance ^_^ I Really Appreciate Your Help! :)

    ReplyDelete
  9. Hi, I've added this slider to my blog posts and it looks great. I added the script and CSS code to my template file so that I don't have to insert as much in each post.

    One issue I'm having is not being able to add multiple sliders. Ideally, I want to add one to the end of each post that's different. I copied the unordered list code like I did in the first post (where it shows up properly) and on a second post it shows up in a vertical line like an actual list. Is there a way to get around this?

    http://posh-couturerentals.blogspot.com"

    Thanks!

    Blair

    ReplyDelete
  10. how make automatic with recent posts?

    ReplyDelete