Using Jquery plugin Innerfade to create news sticker bar

Have you take a look on my latest template Simplex Enews ? Do you notice in Breaking news ? What do you think about it ? In this post , I will show you a small tip for using this Jquery plugin to make a news sticker like that and more ^^

To make this news sticker ,I use InnerFade script . 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. It can be used to make a slideshow, advertising banners or stickers ,animation...


Live Demo

A,Make a Sticker

1,First of all ,create a HTML/Javascript widget in Blogger for script and HTML code .
2, We have a HTML code like that .

<ul id="news">  

<li>  <a href="#n1">1 Lorem ipsum dolor</a>  </li>

<li>  <a href="#n2">2 Sit amet, consectetuer</a>  </li> 

<li>  <a href="#n3">3 Sdipiscing elit,</a>  </li> 

<li>  <a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a>  </li>  

<li>  <a href="#n5">5 Nec Lorem.</a>  </li> 

<li>  <a href="#n6">6 Et eget.</a>  </li> 

<li>  <a href="#n7">7 Leo orci pede.</a>  </li>  

<li>  <a href="#n8">8 Ratio randorus wil.</a>  </li> 

</ul>

Change the text and link to whatever you want . You can add some CSS code to make it look better .

3,Now add a little Jquery to make it work :
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 750,
                        timeout: 2000,
                        type: 'random',
                        containerheight: '1em'
                    });   
            });
      </script>

Ok,save it ,and we have a sticker

B,Make an advertising banner

1, We have a code like that :
<ul id="banner">                   
                    <li>
                        <a href="......"><img src="banner1.jpg"  /></a>
                    </li>       
<li>
                        <a href="......"><img src="banner2.jpg" /></a>
                    </li>   
<li>
                        <a href="......"><img src="banner3.jpg"  /></a>
                    </li>   
<li>
                        <a href="......"><img src="banner4.jpg" /></a>
                    </li>           
                </ul>

You can add or remove banner by add or remove <li>    <a href="......"><img src="banner....jpg" /></a>
                    </li>  for more or less banner.
2,The Jquery code like example A :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('ul#banner').innerfade({
                        speed: 1000,
                        timeout: 5000,
                        type: 'sequence',
                        containerheight: '220px'
                    });
            });
      </script>
 Ok,save it and we are done .

C,So the structure to call Innerfade 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript" src="http://simplexportfolio.googlecode.com/files/jquery.innerfade.js"></script>
        <script type="text/javascript">
       $(document).ready(
                function(){
        $('ID or class of the element containing the fading objects').innerfade({ 

           animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),

           speed: Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: 'normal'),

           timeout: Time between the fades in milliseconds (Default:'2000'),                 type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'), 

           containerheight: Height of the containing element in any css-height-value (Default: 'auto'),

           runningclass: CSS-Class which the container get’s applied (Default: 'innerfade') }); 

    });
      </script>
 That's all for Innerfade Jquery plugin . Although simple but I think this plugin is very useful .If you need a light-weight , fast Jquery plugin for making a news sticker or rotating banner ,it's the plugin for you .