Inspired by Ronny Dee 's comment in my blog ,I want to introduce Nivo Slider jquery to you . It's an awesome Jquery plugin for slider with 9 unique transition effects ,and it look very professional like any Flash slide show .One of the most impressive slider I've seen .



you can see Live Demo here
 How about the effects? Cool? This plugin has been tested for most of popular browsers such as IE 7.0+ ,FireFox v3+ ,Chrome,Opera ,Safari ...so I don't think you will get trouble with browser when using this plugin .
Here is steps for install and use this plugin for your Blogger .

1, Download Nivoslider plugin from this site . Or you can download directly from this link .If you download this plugin from website ,you will see two version : production and development . Production is the version in which the code is encrypted for copyright protection . And the development is not encrypted . You can download both of them ,but development version is better .

2,Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting .

3,Create a HTML/Javascript widget in your Blogger blog .

4,Paste this code into widget content :
<link rel="stylesheet" href="your host .../nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="your host .../jquery.nivo.slider.pack.js" type="text/javascript"></script> 
The code above include Jquery framework and nivoslider plugin to your site .

5,Paste this code right after the code in step 3 :

<style>
#slider {
    position:relative;
    -moz-box-shadow:0px 0px 10px #333;
    -webkit-box-shadow:0px 0px 10px #333;
    box-shadow:0px 0px 10px #333;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
}
#slider a {
    border:0;
}
.nivo-controlNav {
    position:absolute;
    left:47%;
    bottom:-30px;
}
.nivo-controlNav a {
    display:block;
    width:10px;
    height:10px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:-10px 0;
}

.nivo-directionNav a {
    display:block;
    width:32px;
    height:34px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-32px 0;
    right:10px;
}
a.nivo-prevNav {
    left:10px;
}
</style>
This CSS code will add arrows and bullets icons for navigation in NivoSlider . It also stop flashing images before this plugin loads .

6,The code of slider content.Paste it after the code in step 5
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://simplexdesign.blogspot.com"><img src="images/slide2.jpg" alt="" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
...............
</div>
As you see ,in slider content ,you can add links and caption to images .Modify them and add more if you want .

7,Make this plugin work by adding an initial code :

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
The initial code above is a simple one . Nivo slider has many options ,and here is the initial code with full option (and description for each option )
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        animSpeed:500,
        pauseTime:3000,
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){} //Triggers after all slides have been shown
    });
});
</script>
each line is an option ,and you can add ,modify value or remove for adding or removing option . For example ,the line "keyboardNav:true, //Use left & right arrows" mean it allow using right-left arrow button on keyboard for slider navigation . If you don't allow using keyboard ,set the value to "false" . 

8,Save the widget and see what we have ^^


A note for you : Size of displaying slider depend on size of "#slider" element and images in slider . For example : to make a slider which has width : 700px , you have to set the width of slider element to 700px  ; like this
#slider {
width:700px;
}
and use images which have the width :700px for fullfill the slider element . If you use a smaller image ,you will see the slider with smaller size .
That's all . I hope you will find something interesting with this plugin .
Here is list of showcase for this plugin ,you can take a look for inspiration ^^




Supporters:
Check out Hosting Observer – your guide to finding more
reliable web hosting plans
online.

Share this post

Advertisement

17 comments

  1. Thanks for taking the time to make this tutorial. I have already added one of the sliders to my blog. I like the effects of this slider. After trial and error finally the slider works nicely in my blog http://bullyingogah.blogspot.com/. Thank You, Bro :). Keep going !

    ReplyDelete
  2. Many institutions limit access to their online information. Making this information available will be an asset to all.

    ReplyDelete
  3. Ahhh finally! I've trying to find this! I'm newbie in web design, so I really appreciate this! Thanks!

    ReplyDelete
  4. I have been looking looking around for this kind of information. Will you post some more in future? I’ll be grateful if you will.

    Regards~

    Prasen Dutta

    Business Development LLC, at software development company India

    ReplyDelete
  5. I am blogger newbie. I can't get through step np.2
    Can someone tell me how to upload "nivo-slider.css" and "jquery.nivo.slider.js" to a host using Google Code?

    Step 2. : "Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting ."

    ReplyDelete
  6. Hello brother, how are you
    We miss your posts for the distinctive and interesting
    For this topic I took his experience
    http://jsbin.com/iqise3
    And also of the view that the result a great
    But when his experience in the blogger did not work
    I advise you that the experience you personally to make sure it
    Regards

    ReplyDelete
  7. @Rusdi : I made a post on how to use Google code for hosting file ,especially japascript files ,so you can search it out on my blog.
    @khaled :Thanks for your comment . I myself always test and make a live demo before writing down .About blogger,I think all javascript file can work out if you put it (1) in a html/javascript widget or (2) in template file . Blogger can work with javascript as well as others website and platform . If you see it not work for you ,pls write me a comment in blog ,and we all find out what happen . Thanks again .

    ReplyDelete
  8. I've gotten this to work except for the css link stylesheet everytime I save the widget it slices down the side of the page, and so I check the code and the widget deletes the css link stylesheet I work in html and xhtml and css, not javascript...help?

    ReplyDelete
  9. I'm getting so frustrated, I've been trying to work it for days in my blogger site and it isn't working. Tried everything.

    ReplyDelete
  10. I got to admit that it was the Toy story images that attracted me to the slider. May be kiddish but true. But as i used the slider once i started to really love it. I had got it worked in my blog once. By the way, it is the Nivo slider that is first in the list of my 10 Featured Post sliders for Blogger.

    ReplyDelete
  11. How can I select just "fade" transition? Thanks

    ReplyDelete
  12. A very useful code indeed, even better if I can get it to work. I did all the steps you mentioned in this post, but i notice that this line goes missing "<link rel="stylesheet" href="your host .../nivo-slider.css" type="text/css" media="screen" whenever I save the java/html widget. Any idea how I can solve this problem? A reply will be most appreciated. Thanks :)

    ReplyDelete
  13. How do you remove the dark shadow from around the slideshow?

    Thanks!

    ReplyDelete
  14. A very useful tutorial.
    Thank you, sir õ/

    ReplyDelete
  15. how to create jquery thumbnail slide show . please give us a good example. http://murraliitechnos.in

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers