Here is how I do the slide show similar to My Template BloggerMag Template.
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] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 80; //
summaryTitle = 35; //numposts = 5; //
home_page = "http://st-slideshowdemo.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=’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..
