How to create a Feature Article slide show with thumbnails For Blogger Templates

Qury plugins are needed : jQuery cycle

First of all, the features I want to have:

• Not to manually resize thumbnails


• Be able to display photos with different size and ratio


• Auto scroll with thumbnail indication


• Manually scroll though thumbnails


• Sliding effect with easing animation instead of fading

Here is the Demo

This is how I did it:

1.Header:

Add the following code Before </head>.Remove ‘http://linktohow.blogspot.com/’.Add ur blog Url.




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://rajablogs.co.cc/cycle.js' type='text/javascript'/>
<script src='http://rajablogs.co.cc/slideshow.js' type='text/javascript'/>  


    <script type='text/javascript'>
imgr = new Array();


imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = true;


aBold = true;


summaryPost = 80; //
summaryTitle = 35; //


numposts = 5; //
home_page = "http://linktohow.blogspot.com/";


label8 = "Feature";
tLabel8 = "Feature";
Title8 = "Feature";


function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}


function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; 
    img  = new Array();
    document.write('<ul class="clearfix"list-style-type: none; style="position: relative;">');
      for (var i = 0; i < numposts; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);


    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;


    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];


    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];


    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }


    //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";


posttitle = (aBold) ? ""+posttitle+"" : posttitle;


    var trtd = '<li style="list-style-type: none;" id="main-post-'+i+'"> <img style="height:165px; width:160px; margin:8px 0px 0px 8px;" class="post_thumbnail thumbnail thumbnail post_thumbnail"src="'+img[i]+'"/>  <div class="entry"><h2 class="post-title"><a title=' slider by spicytricks.blogspot.com' href="'+posturl+'">'+posttitle+'</a></h2>    <p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div></li> ';
    document.write(trtd);
    j++;
}
document.write('</ul>');
}


</script>

2.Style with CSS:

Add this Before </b:skin> 


/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 580px;    
height:220px;
overflow:hidden;


border: 1px solid #ddd;}


#slideshow ul {
margin: 0;
padding: 0;    background:transparent;


list-style: none;
height: 1%; /* IE fix */}


#slideshow li  {
margin: 0;
padding: 0;    
background:transparent;


list-style: none;
}


#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}


/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
overflow: hidden;
width: 578px;


}


#slideshow .slides ul {    overflow: hidden;


width: 560px;}


#slideshow .slides li {
     display:none;
     list-style: none;


    left:-99999em;
    width:580px;
    height:180px;
    display:block;
    overflow: hidden;
    position:relative;
    z-index:1;}


.js #slideshow .slides li {
    margin: 0;
    padding: 0;
list-style: none;
    width:580px;
    height:180px;
    display:block;
    overflow: hidden;
    position:relative;
    z-index:1;
    }


#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active  {
    font-size:12pt;
    line-height: 1.1em;
    margin:0;
    margin: 0;
    letter-spacing:0;
    list-style: none;


    }
    #slideshow .slides li  .entry  {
    overflow:hidden;    
    margin:-165px 6px 2px  185px;
align:right;
    }


/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow ul.slides-nav {
background-color: #ddd;
border-top: 1px solid #ccc;}


#slideshow .slides-nav li {
list-style:none;
float: left;}


#slideshow .slides-nav li a {
display: block;
padding: 12px 17px;
outline: none;}


.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {
background-color: #eee;
text-decoration:underline;
}


.js #slideshow .slides-nav li.on a {
position: relative;
top: -3px;}

3.Create Feature category:

You have to create Label ‘Feature’.because I code to hold feature post contents in feature label.Add your Feature posts in the feature label.It will automatically Updated.

4.Slide show with jQuery cycle.

According to JQuery cycle’s , having a slide show with pager and auto scroll is easy.

Here is the HTML code:Add this under Header or site naviagtion area



<div id="slideshow" class="clearfix">
            <div class="slides" >


    <script language="JavaScript">
                document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label8+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
                </script>    


            </div>
        <ul class='slides-nav'>
            <li><a href='#main-post-0' title='linktohow.blogspot.com'>1</a></li>
            <li><a href='#main-post-1' title='linktohow.blogspot.com'>2</a></li>
            <li><a href='#main-post-2' title='linktohow.blogspot.com'>3</a></li>
            <li><a href='#main-post-3' title='linktohow.blogspot.com'>4</a></li>
            <li><a href='#main-post-4' title='linktohow.blogspot.com'>5</a></li>
            <li><a href='#main-post-5' title='linktohow.blogspot.com'>6</a></li>


            </ul>
            </div>

That’s it. :)