Flexible & Customizable jQuery News Ticker Plugin - Easy Ticker

Flexible & Customizable jQuery News Ticker Plugin - Easy Ticker
File Size: 44.1KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Easy Ticker is a jQuery plugin helps you create a highly customizable, cross browser, flexible and infinite news ticker on your web page.

Features:

  • Lightweight (~3kb minified) and easy to use
  • Allows to scroll down or up the items in your news ticker.
  • Auto scroll on page loaded and stop on mouse hover.
  • Allows to control the behavior out of the box.
  • Customizable easing and animation options.

Related plugins:

Basic Usage:

1. Include the latest jQuery library together with jquery.easy-ticker.js on your documents.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.easy-ticker.js"></script> 

2. Include jQuery easing plugin for easing functions.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Create the html for your news ticker.

<div class="demo">
<ul>

<li>
<img src="http://www.jqueryscript.net/small/images/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.jpg" alt="Expandable Input" />
<a href="http://www.jqueryscript.net/form/jQuery-Plugin-To-Expand-Collapse-Input-Field-Expandable-Input.html">Expandable Input</a>
<p>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</p>
</li>

<li class="odd"><img src="http://www.jqueryscript.net/small/images/Creating-A-Full-Page-Photo-Gallery-with-jQuery-Photor-Plugin.jpg" alt="jQuery Photor Plugin" />
<a href="http://www.jqueryscript.net/gallery/Creating-A-Full-Page-Photo-Gallery-with-jQuery-Photor-Plugin.html">jQuery Photor Plugin</a>
<p>Photor is a fast and easy jQuery plugin to create a responsive & touch-friendly full page image gallery with CSS3 transitions and transforms.</p>
</li>

<li><img src="http://www.jqueryscript.net/small/images/Windows-8-Style-jQuery-Data-Table-Decorator-Metreaux-Tables.jpg" alt="Metreaux Tables" />
<a href="http://www.jqueryscript.net/table/Windows-8-Style-jQuery-Data-Table-Decorator-Metreaux-Tables.html">Metreaux Tables</a>
<p>Metreaux Tables is a jQuery plugin to create nice, clean, themeable, andmodern Windows 8 UI Style data tables with the power of DataTables jQuery javascript library.</p>
</li>

...

</ul>
</div>

4. Call the plugin with default settings.

<script>
$(function(){
$('.demo').easyTicker();
});
</script>

5. All the settings.

<script>
$(function(){
$('.demo1').easyTicker({
direction: 'up', // up or down
easing: 'swing', // easing options
speed: 'slow', // animation speed
interval: 2000,
height: 'auto',
visible: 0, // change the number of default visible elements.
mousePause: 1, // pause on hover
controls: {
up: '',
down: '',
toggle: '',
playText: 'Play',
stopText: 'Stop'
}
});
});
</script>

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