jQuery Quick News Fader

Submitted by muneer on Thu, 08/11/2011 - 11:28

jQuery content fade (rotate/slide) plugin is a multipurpose jQuery tool for displaying content. This is a great tool to present news, events, announces, press releases, and other content to your website page.

Features

Light-weight, fast and simple.
Auto/Manual rotate.
Customizable animation speed.
Control key for previouse/next/pause/play.
Use your own CSS.
Multiple item in a single page.
Borwser support.
Search engine friendly.
Cross-browser compatibility

Demo Link

Example

Cross Browser support

Usage:

  jQuery(document).ready(function() {
      $(".my-list").newsFade();    
  });

<div class="my-list">
    <div class="news-fade-wrapper">
        <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
        </ul>
    </div>
        <a href="" id="prev">&lt;&lt;</a>
        | <a href="" id="pause">pause</a> 
        | <a href="" id="play">play</a> 
        | <a href="" id="next">&gt;&gt;</a>
</div>

Default Options

Following options are default. You can configure them with your options.

{
      interval  : 5000,
      style    : "fadeIn",
      limit    : 1,
      auto     : false,
      motionSpeed : 500,
      height   : null
 };

interval	Define the time between each news item's display.
style	Rotation style. Allowed values are "fadeIn", "slideDown".
limit	Number of items to display in a single view.
auto	Enable / Disable automatic transition.
motionSpeed	Transition speed.
height	Height of the wrapper in pixel. Example value : "120px"(please do not forget the quotes).

Tags:

Attachment:

Download Version 1.0 (ZIP) 1.78 KB

Download Version 1.0 (TAR.GZ) 1.71 KB

News fade demo files. (Example file)

Comments

zamaan

Thu, 08/11/2011 - 15:00

Permalink

jquery quck news fader

Thank you for this awesome jquey plugin.

Mike

Sat, 08/27/2011 - 05:46

Permalink

News Fader Not Working With IE8

Have you tested the jQuery Quick News Fader With IE? It's not working for me.

Thanks in advance.

Shell

Wed, 08/31/2011 - 20:08

Permalink

Supporting HTML Code.

Thanks for providing the JavaScript for this but am unable to implement because it is missing the additional HTML sample code. Can you provide a sample of how the HTML page should be set-up with rotating text blocks. Doing a Page Source of the demo does not have all the information.

Much appreciated.

muneer