1News Online:
Home » » Tutorial Blog - Automatic Image Slider

Tutorial Blog - Automatic Image Slider

Sunday, October 14, 2012 | 12:49 PM

This tutorial is answering questions from friends debbie alias irlando Manurung Zondim, asking to be made a tutorial slider. Templates are used in the blog will also be my share, but now again busy mass nguli so later wrote when it was time to spare. There are some templates that will be my share but this time I made simple, with little use of javascript, yes that would have been more lightly than usual. Okay back to the tutorial that I created, this time I will discuss about how to create a simple automated image slider that will display your latest posts.

image slider otomatis
DEMOThis slider is only wearing innerfade jquery and cycle plugin jquery content slider to soften displacement Meaning Innerfade jquery something like this:

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.Source : medienfreunde.com

Well even confused myself I mas / ya i can understand English 6 first time school, just on how to make it:Login to blogger with your accountAfter that select the blog you want to add this slider.Go to >> Edit HTML template, then check expand widget templatesJust in case if something goes wrong in editing later, you should backup your template first.After all the steps above you do, put the following code above the code]]> </ b: skin>:

#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(http://2.bp.blogspot.com/-j2T8LeJpjkY/UBfzfSqJGSI/AAAAAAAAIDE/jiGwQpYoRO4/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(http://2.bp.blogspot.com/-S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

Note the blue code above, it is the width and height of the slider on the demo that I made, you simply adjust the size of your template.
The next step is to position the Edit HTML, insert the following code on code

</head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/jquery.innerfade.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 7;

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('<div class="slides">')
if (numposts <= json.feed.entry.length) {
maxpost = numposts;
   for (var i = 0; i < maxpost; 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;

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];

     if ("content" in entry) {
       var postcontent = entry.content.$t;}
     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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';



Note the URL in red script above, it is the latest series jQuery.min.js script code that I use to make this slider. If your template already there jQuery.min.js although different series, red color code above no longer need you entered. Just one jQuery.min.js existing template, it is up to serial number, if possible the latest version.
Code blue: 7 is the number of slider displayed. While the numbers 340 and 212 is the length and width of the image in the slider.
The next step is to call the slider to appear on our blog. Search <div id='main-wrapper'>, then place the following code below:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='featuredSlider'>
<div class='container'>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
<div class='navigation'>
<ul class='pagination'/>      <script>
 fx:     &#39;fade&#39;,
 speed:  &#39;slow&#39;,
 timeout: 3000,
 pager:  &#39;.pagination&#39;
</div>  </div> <!--end .container-->

If you want to display per category or label slider stay added only the code above:

/feeds/posts/default/-/your label?max-results

 Please replace "your label" with the category you want to display on the slider.
Lastly, save templates and see the results.
That was automatic image slider tutorial joss really that existed at Johny Ganteng Banget, if still unclear please leave a message in the comment box. Congratulations dawn and hopefully useful.
Kongsi artikel ini : :

Post a Comment

Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger