How To Add Cool jQuery Accordion Image Slider To Blogger?

	Sponsored Links
		Share Save on Delicious

The name accordion came from the box shaped musical instrument, which works on the principle of squeezing the billows.

The jQuery image slider which we are going to see looks similar to the instrument and works really smooth. You never need to struggle to use this jQuery accordion image slider. This version of jQuery image slider hides some part of the image on the first load. When you hover the mouse on the part visible, the image slides and shows up.

This can be used not only on Blogger but on any other site.


The objective of the tutorial:
1. Create a jQuery image slider which has the accordion effect.
2. Slide the images smoothly on mouse hover.

DEMO

IMPORTANT:
Backup the template before modifying proceeding.

Tutorial to implement jQuery Accordion Image Slider on Blogger:
Step 1. Go to Dashboard > Select Blog > Template > Edit HTML

Step 2. Search (Ctrl+F) for
 </head>
Just before </head> paste the following jQuery and CSS codes:
jQuery and JavaScript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-itechcolumn.googlecode.com/files/jquery.kwicks-1.5.1.js"></script>
<script type="text/javascript">
    $().ready(function() { 
    $('#accordion-slider').kwicks({ 
        max : 750, 
        spacing : 2
    }); 
});
</script>

The CSS Code:

#accordion-slider-wrap{
 background: #FFF url('slider-shadow.png') bottom center no-repeat;
 padding: 0 0 34px 0;
}
ul#accordion-slider{
 margin: 0;
 padding: 0;
 list-style: none;
 position: relative;
}
ul#accordion-slider li{
 display: block; 
 overflow: hidden; 
 padding: 0;
 float: left;
 width: 230px;
 height: 300px;}

Step 3. Save the Template.

To Make The Background Scrolling Effect To Appear:
Paste the following code where-ever you wish the message box to appear on Blogger-
HTML Markup:

<div id="accordion-slider-wrap">
<ul id="accordion-slider">
<li><img src="Image_URL" width="750" height="300" alt="Image Title"/></li>
<li><img src="Image_URL" width="750" height="300" alt="Image Title"/></li>
<li><img src="Image_URL" width="750" height="300" alt="Image Title"/></li>
<li><img src="Image_URL" width="750" height="300" alt="Image Title"/></li>
</ul>
</div>

NOTE: Replace the Image_URL with your actual image URL which you would like there to appear.

Where the above HTML Code can be pasted?
1. In a HTML/JavaScript gadget.
2. Directly into your Blogger Template HTML.
3. In your Blogger post HTML section.
4. In your Blogger page HTML section.
5. To your Footer, header, sidebar, below the navigation and so on.

DEMO

Hope you enjoyed the tutorial and of course the demo.. :-) Catch you again with more stuffs, till then bye bye.

Special thanks to aoclarkejr for teaching me this tutorial.

~iTechColumn