How to create a Feature Article slide show with thumbnails For BloggerTemplates

Here is how I do the slide show similar to My Template BloggerMag Template.

slideshow1

jQury 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://st-slideshowdemo.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] = &quot;http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif&quot;;

showRandomImg = true;

aBold = true;

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

numposts = 5; //
home_page = &quot;http://st-slideshowdemo.blogspot.com/&quot;;

label8 = &quot;Feature&quot;;
tLabel8 = &quot;Feature&quot;;
Title8 = &quot;Feature&quot;;

function removeHtmlTag(strx,chop){
    var s = strx.split(&quot;&lt;&quot;);
    for(var i=0;i&lt;s.length;i++){
        if(s[i].indexOf(&quot;&gt;&quot;)!=-1){
            s[i] = s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length);
        }
    }
    s =  s.join(&quot;&quot;);
    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(&#39;&lt;ul class=&quot;clearfix&quot;list-style-type: none; style=&quot;position: relative;&quot;&gt;&#39;);
      for (var i = 0; i &lt; 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 &lt; entry.link.length; k++) {
              if (entry.link[k].rel == &#39;alternate&#39;) {
                posturl = entry.link[k].href;
                break;
              }
        }
        for (var k = 0; k &lt; entry.link.length; k++) {
              if (entry.link[k].rel == &#39;replies&#39; &amp;&amp; entry.link[k].type == &#39;text/html&#39;) {
                pcm = entry.link[k].title.split(&quot; &quot;)[0];
                break;
              }
        }
        if (&quot;content&quot; in entry) {
              var postcontent = entry.content.$t;}
        else
        if (&quot;summary&quot; in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = &quot;&quot;;
        postdate = entry.published.$t;
    if(j&gt;imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=&quot;&quot;,a); c = s.indexOf(&quot;&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);

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

    //cmtext = (text != &#39;no&#39;) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt;(&#39;+pcm+&#39; &#39;+text+&#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &#39;&#39;;

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

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

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

    //var daystr = (showPostDate) ? &#39;&lt;i&gt;&lt;font color=&quot;&#39;+acolor+&#39;&quot;&gt; – (&#39;+day+ &#39; &#39; + m + &#39; &#39; + y + &#39;)&lt;/font&gt;&lt;/i&gt;&#39; : &quot;&quot;;

posttitle = (aBold) ? &quot;&quot;+posttitle+&quot;&quot; : posttitle;

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

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

    &lt;script language=&quot;JavaScript&quot;&gt;
                document.write(&quot;&lt;script src=&quot;&quot;+home_page+&quot;feeds/posts/default/-/&quot;+label8+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&quot;&gt;&lt;/script&gt;&quot;);
                &lt;/script&gt;       

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

            </ul>
            </div>

 

That’s it.If you have Any queries,just ask me.keep visiting for my next template..

Raja CRN

Raja CRN is the Founder of CRN Interactive that offers various useful Digital Resources. He has more than 7 years of experience in content Writing and Web development specialized in WordPress. For the past 4 years, He is working on the Linux Administration. In Free Time, He dives into Android Development. He is an engineering graduate in Information Technology. He's also very social, find him at Google+

Copyright © 2009 -16 . SpicyTricks    Designed by ThemePacific