A Simple Stylish jQuery Featured Slideshow For Blogger




| 64 comments

Earlier this week i brought you a very cool jQuery Featured Image Slider that can slide images and videos.In that post i explained how  i hadn't covered featured sliders or slideshows too much but was gonna make up for it.So here we have another featured slider slash slideshow slash image carousel.The slideshow in this post has a simple style but that gives us some extra options, the main one is you can easily make it any size to suit your blog or the images you want to use.

In the demo i have made it quiet small so it will fit above the posts section.But you can have it fit neatly above your posts or you can have it span across your full blog in the cross column zone.

View Demo Button

Pretty nifty, credit goes to Sohtanaka and the download for Wordpress or other platforms can be found there.Lets see how you can add it to Blogger.

Add The Simple Stylish Featured Slideshow To Blogger


Step 1. In your Blogger dashboard click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(http://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Change the size - I currently have the size set to 500x250 as highlighted in the code above.You can change this to make it bigger and remember that size is also the size of the images you add.

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 5. Copy and Paste the following code Directly Above / Before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(&quot;.paging a&quot;).click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});
</script>

Step 6. Save your template.

That's the Script and Css added to your template to make the slider work now we add the html.

Step 1. OK back to your blogs design page and click Add A Gadget > Choose Html/Javascript :





Step 2. Copy and Paste the following code into the Html/Javascript gadget ;

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window">
<div class="image_reel">

<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-1ot3ioCYwow/Tdcf3NzfIHI/AAAAAAAAD-Q/Ckavo7b8GMw/s1600/slider-image-1.jpg" alt="" /></a>


<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-jm2AH-oMcH4/Tdcf3py1SYI/AAAAAAAAD-U/OGqxPE8eVNA/s1600/slider-image-2.jpg" alt="" /></a>


<a href="http://www.spiceupyourblog.com/"><img src="http://4.bp.blogspot.com/-TCA28AlpMjI/Tdcf4MHoYuI/AAAAAAAAD-Y/NzvcJOrjM_4/s1600/slider-image-3.jpg" alt="" /></a>


<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-d_zcV_6OCLY/Tdcf5E4Fu2I/AAAAAAAAD-c/33kU0yD1TYk/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://www.spiceupyourblog.com/"><img src="http://2.bp.blogspot.com/-0uxQB121U-A/Tdcf56FpJuI/AAAAAAAAD-g/ltXixg26NtM/s1600/slider-image-6.jpg" alt="" /></a>


</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div>

</div>

Adding Your Slides

Highlighted in red are the URLs this is were the image will lead to when clicked.
Highlighted in green is the Image URLs replace these with the URLs of your images.

To add more than 5 slides simply add another link and image the same as the ones there now.But make sure to add another number to the pager highlighted in blue.So at the moment there are 5 slides and the pager in blue goes to 5.If you added a 6th slide you would add it like this :

<a href="#" rel="6">6</a>

Once you have your images and links added save the gadget and drag and drop it into position.

That's your simple jQuery slider added to Blogger.

Drop your Comments and Questions below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

64 comments:

  1. First.. stylish slider.

    Can you make Tutorial about Comment blogger Css Design? Seriously.. i love your comment design

    ReplyDelete
  2. thanks for this great slider :D
    i will use it on my blog http://cargoogler.blogspot.com/
    where i have used all your useful tips (almost all of them) :D

    ReplyDelete
  3. I put it in my test blog, and it works perfectly! Thanks!

    ReplyDelete
  4. @Daus Visit Here

    http://www.spiceupyourblog.com/2010/01/replace-post-comment-with-image-and.html

    Keep Visiting Spicupyourblog and Get Useful Tutorial for your blog.

    Thank You..

    ReplyDelete
  5. Is it possible to make this slider where it could be posted only to certain posts?

    ReplyDelete
  6. @ Ey Wade - Do you want it in certain posts or only on the page of certain posts ? To hoe it on only some pages See This Post and the page linked to in the post.

    ReplyDelete
    Replies
    1. pls how to make it in the center i tried with the gadget code but cant work , pls reply

      Delete
  7. would this conflict with jQuery Lightbox Image Overlay Pop Out Effect For Blogger?

    thx - david

    ReplyDelete
  8. @ Nini - If it failed I'm afraid you made a mistake somewere.

    @ Anonymous - There is no reason for it to conflict with it, just make sure you only have the main jQuery script added once.

    ReplyDelete
  9. it really worked! But I want the image position align center! How to do that?? The position of it currently align left, I want to center it! I add traditional *div align=''center''* ..... */div* but fail!! help!!
    Second one, is there another image ribbon backround beside the red one?? Thanks :D

    ReplyDelete
  10. @ Anonymous - When you add the html place <center> before it and </center> after it.

    ReplyDelete
  11. i just found a nice slider here. Its a great slider and put it on my school blog but the image turned to the small size.i don't know what's wrong. can you please tell me!!! Thank you.

    ReplyDelete
  12. @Sya - All the images will be resized to the same height however you can choose the height.Look at the code in Step 3 and the explaination below the code for details.

    ReplyDelete
  13. Thank you very much! It's all about the height of the image and now the slider worked perfect. Thanks for your advise and your blog!

    ReplyDelete
  14. Hi thanks for the tutorial for this. I'm able to install this and it perfectly on my blog, however I don't want the slider to appear on every of my page i.e when I hit to one of my blog post I don't want the slider to show up. How am I able to put this code and position the same exact way as it appear on my blog.

    ReplyDelete
  15. Replies
    1. This is a fantastic slider and great post. However, I too have the same issue of the slider appearing on every page. I was hoping to find more information but it appears there's no link to your post above (was probably removed some time ago). Could you kindly post the link again that outlines what to do to configure the slider to appear on only one page (i.e., the home page)?

      Thanks so much!

      Delete
  16. Paul Crowe thanks a lot you, I got it running and it works perfectly well on my blog.

    ReplyDelete
  17. @ Peonyinlove - Great news well done !

    ReplyDelete
  18. Is there a way to get rid of the red counter on the side?
    Thanks!

    ReplyDelete
  19. thank you for the great slide...i have reduced the size from 250-500 to 360-340...but the red line didnt shift, what should i do?
    i wanna use it on my blog http://popcornoflife.blogspot.com/

    ReplyDelete
  20. Hello, thank you so much for your beautifull slider!

    I used it for my blog, it works perfectly with Firefox, but with Chrome and IE I have some problems. Pictures are cut at the top and with IE there is a gap at right.

    My blog adress: http://a-demi-mot.blogspot.com/

    Could you help me? What should I do?

    Thank you!
    Elise

    ReplyDelete
  21. Thank you so much for this it saved me a lot of grief for my site thanksk again

    ReplyDelete
  22. Thank you a lot for this, it worked like a charm ;)

    I just have one problem. Let's say I leave my blog page open in one tab and I change tab to check on other stuff, when I come back the slideshow keeps on turning restlessly, not waiting for the wait time.
    You can check it out on my blog here:
    http://theforkfather.blogspot.com/
    Just open it, leave it in a tab and switch to someting else for a couple of minutes, then come back and you'll see what i'm talking about.

    Is there a way to fix this?

    Thanks a lot!!!

    ReplyDelete
  23. I change the slider timing to 30 seconds and it doesnt work! It changes every 3 second! help me plz!

    ReplyDelete
  24. Hi All,
    no one is experiencing the problem I was talking about a few comments ago? I thought I solved it yet it's still there.
    Does this gadget work ok on your pages? I mean, you switch tabs, you leave the page containing that slider inactive, then you come back and it's all right? No messed up animations?

    ReplyDelete
  25. Hello, this is a great post! But i can't make it work, I only got all images appearing on the page and no script at all. I already checked and re-checked every instructions. What can I do? Thanks in advance.

    ReplyDelete
  26. Hi Pedro,
    did you notice that step 5 has a scroll box in it? you need to copy the whole text, not just the part displayed.

    Cheers

    ReplyDelete
  27. I have some problem here. If the images are different in width, how can I make it work so that the slideshow automatically resize it. And how do I set the timer?

    ReplyDelete
  28. I solved my problem posted on August, 25th. It was just the jquery version. I used the 1.6.2 while this script is designed on 1.3. It runs well on 1.4, too

    ReplyDelete
  29. This is really cool but I was wondering how to get pictures when clicked on to show on the same page but popped and nicer with the thumb nails of pictures underneath the one that you clicked on? I had it on my template before but I can't find it now! :-( I was wondering if you knew how to do that?

    ReplyDelete
  30. Awesome.. it works like a Charm.. all Cheers for posting.

    One question here is:- How to add Title/description to the images.. please direct to the post if this is already discussed.

    Thanks and here is my blog:
    http://catch-mani.blogspot.com/

    ReplyDelete
  31. nice widget.....
    but can't i add more than 7 pictures in the slide...????
    after 7 pics, the number "8" goes outside the ribbon, and looks ugly
    :(

    ReplyDelete
  32. @catch mani : u can do it by adding hover text with each image...i have done the same....
    i could hv provided d link of my blog...but it seems 2 be banned here...jst google 4 dis.
    or just add " title="description of image " (without quotes) after the image url....

    ReplyDelete
  33. This is great. Thanks for posting. Is there a way to change the red image?

    ReplyDelete
  34. Thanks for yor nice sharing!!!!

    How can I "aligned center" the entire slide????? The way you specified above is not working!!!!

    Plz solve the problem........

    ReplyDelete
  35. awesome work man ... works perfectly

    ReplyDelete
  36. A lot of "Thanks" for your tutorial, it really work my bro.

    ReplyDelete
  37. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

    ReplyDelete
  38. sir g when i add the code afteer ]]> all code show in the header what wrong with me

    ReplyDelete
  39. This comment has been removed by the author.

    ReplyDelete
  40. Thanks for sharing the information.. it really helped me in soughting out many problems..

    ReplyDelete
  41. Sir. i successfully uploaded this slideshow to ma blog...
    i want to know, how to change the style of slideshow...

    please help me

    ReplyDelete
  42. many thanks.one qusestion wuy after not long time the slider starts to spin faster?.
    i have made changes but i dont think that i chanced someting with the speed.
    beacause it works fine in the start.
    http://gr-john.blogspot.com/

    thanks in advance

    ReplyDelete
    Replies
    1. Hi there,
      I had the same problem, check out my comment from Oct, 3 on how I solved this.
      Cheers

      Delete
    2. Hi !

      I have the same problem with the speed ... . At first it's work fine, but after some seconds, the slideshow is faster.

      @Totooch, I have read your comment, unfortunatly it doesn't help me :(.

      Delete
  43. This is just too cool! I've been looking for code like this for months and I finally found this link! It worked great.

    A few pointers.

    1. I had problems with the last slide showing, due to the size of the pics I had. Once I adjusted the size parms, it worked perfectly.
    2. If you need to center it, just embed all of the html inside a regular html 2-column table. Adjust the width of the 1st column and add the code in the second column to make it appear centered. Through some trial and error you'll have a centered slideshow in no time!

    ReplyDelete
  44. Yeah, me again!

    I just modified the code to replace the numbers in the banner with small pics of the slides themselves. So the user can see a small version of the slide they are going to see, as well as be able to see the slide so they can click directly on it. I need to get the red highlighting working a bit better, but I'll get to that on another day. But I think the pics really make it look cool! See www.newbeginningsantiques.com for what it looks like.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  45. This is awesome! I've been trying to find an easy way to do this with manual and auto controls...this is perfect. Thank you!

    ReplyDelete
  46. This comment has been removed by the author.

    ReplyDelete
  47. this works and looks fabulous! I have modified it to fit my blog :)
    Thank you.

    ReplyDelete
  48. i love you bro....its working perfectly...

    ReplyDelete
  49. Thank you very much for this slider. I've tried out a lot but most didn't work or worked poorly. Your explenation was clear and simple. Like some already posted here, I have trouble with centering the slider (preferebly want it to be as wide as my blog itself). I saw the center /center sollution but don't know where to put it and the suggestion about using the 2 collums didn't make sense to me either. It would be great if you could tell me more precise where to put the center /center tags.

    ReplyDelete
  50. Hi, the slider works fine; I'm having trouble fitting my images to it. One images is bleeding into another.

    ReplyDelete
  51. waaaah i didn't work!!! waaaah I think I got the URL wrong but Idk
    can u teach me how to get the URL of the image?

    ReplyDelete
  52. Hi Paul.
    I had been looking for a code like this for my blog. Not only was it easy to perform with my little knowledge, but the design also blends in perfectly with my blog design.

    I am using the slide show to promote current projects and I would like to add a discription to the picture. I know I could add it to the picture before uploading (like in photoshop), but since some of the data changes every now and then (as f.e. a status update) I'd rather change the text in the HTML gadget.

    Could you provide me with the code to perform that? It would be nice if I could also change the font style with it too.

    Thanks a million for your help!

    ReplyDelete
  53. How to add image title and description? Thanks

    ReplyDelete
  54. Oh I'm royally much obliged to you. I was searching for something like it for too many time! This is the ONLY beautiful slider that works in my Blog. Thank you muchly my great sir.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us