jQuery Quick News Fader

Printer-friendly version
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
 };
intervalDefine the time between each news item's display.
styleRotation style. Allowed values are "fadeIn", "slideDown".
limitNumber of items to display in a single view.
autoEnable / Disable automatic transition.
motionSpeedTransition speed.
heightHeight of the wrapper in pixel. Example value : "120px"(please do not forget the quotes).

Attachment: 

Comments

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.

-> NOT WORKING ON INTERNET

-> NOT WORKING ON INTERNET EXPLORER! <-

Hi there,
also got the same problem like mike: Fader won't work on IE (in my case v.7.x) ...
Anyone a solution/fix for this?

Thanx & Cheers,
Kris

Add new comment