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

Copyright © 2009 -18 . SpicyTricks    Designed by ThemePacific