Flexible jQuery Vertical News Ticker Plugin - Advanced News Ticker

File Size: 756 KB
Views Total: 53504
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Flexible jQuery Vertical News Ticker Plugin - Advanced News Ticker

Advanced News Ticker is a jQuery plugin used to vertically scroll a group of html contents as a news ticker. Provides a lots of parameters and callbacks to make your own news ticker on the web page/app.

Features:

  • 2 directions of movement. Up or down.
  • Automatically start scrolling on page loaded.
  • Automatically stop on mouse hover the news ticker elements.
  • Custom controls to perform start, pause, next and previous actions.

Related plugins:

Basic Usage:

1. Load the required newsTicker.css file in the head section of the page.

<link rel="stylesheet" href="css/newsTicker.css">

2. Create a multi-lines news ticker with controls following the Html structure:

<div id="multilines">
<div class="container">
<ul class="newsticker">
<li>News 1 <a href="#">Read more...</a></li>
<li>News 2 <a href="#">Read more...</a></li>
<li>News 3 <a href="#">Read more...</a></li>
...
</ul>
</div>
<div class="controls"> 
<a class="prev-button" href="#">Prev</a>
<a class="next-button" href="#">Next</a> 
<a class="stop-button" href="#">Stop</a> 
<a class="start-button" href="#">Start</a> 
</div>
</div>

3. Load the jQuery library and newsTicker.js script at the bottom of the page.

<link rel="stylesheet" href="css/newsTicker.css">

4. Initialize the news ticker with options.

<script>
var multilines = $('#multilines .newsticker').newsTicker({
row_height: 100,
speed: 800,
prevButton: $('#multilines .prev-button'),
nextButton: $('#multilines .next-button'),
stopButton: $('#multilines .stop-button'),
startButton: $('#multilines .start-button'),
});
</script>

5. All the available options and callbacks.

<script>
var multilines = $('#multilines .newsticker').newsTicker({
row_height: 20, // the height (in px) of one row
max_rows: 3, // the number of rows displayed at the same time
speed: 400, //  the animation speed (in ms)of the rows moving up or down
direction: 'up', // the direction of the rows movement
time: 2500, // the times (in ms) before the rows automatically move
autostart: 1, // enable/disable auto start on load
stopOnHover: 1, // enable/disable pause when mouse hovers the newsTicker element
nextButton: null, // set the element triggering next action on click
prevButton: null, // set the element triggering previous action on click
startButton: null, // set the element triggering start action on click
stopButton: null, // set the element triggering stop action on click
hasMoved: function() {}, // function
movingUp: function() {}, // function
movingDown: function() {}, // function
start: function() {}, // function
stop: function() {}, // function
pause: function() {}, // function
unpause: function() {} // function
});
</script>

Change log:

v1.0.1 (2014-02-13)


This awesome jQuery plugin is developed by risq. For more Advanced Usages, please check the demo page or visit the official website.