[jQuery] show many news in one screen instead of one with Newsticker
Hello,
I’m using Newsticker (http://www.texotela.co.uk) in my site, I would
like to know how to show multiple news per each screen instead of only
one in this plugin.
I'd like to show 10 news by 10 because of their big number.
Any idea on how to make this ?
Thanks a lot
Jquery code :
------------------------------------
<script type="text/javascript">
(function($) {
/*
* A basic news ticker.
*
* @name newsticker (or newsTicker)
* @param delay Delay (in milliseconds) between iterations.
Default 4 seconds (4000ms)
* @author Sam Collett (http://www.texotela.co.uk)
* @example $("#news").newsticker(); // or $
("#news").newsTicker(5000);
*
*/
$.fn.newsTicker = $.fn.newsticker = function(delay)
{
delay = delay || 4000;
initTicker = function(el)
{
stopTicker(el);
el.items = $("li", el);
// hide all items (except first one)
el.items.not(":eq(0)").hide().end();
// current item
el.currentitem = 0;
startTicker(el);
};
startTicker = function(el)
{
el.tickfn = setInterval(function() { doTick(el) }, delay)
};
stopTicker = function(el)
{
clearInterval(el.tickfn);
};
pauseTicker = function(el)
{
el.pause = true;
};
resumeTicker = function(el)
{
el.pause = false;
};
doTick = function(el)
{
// don't run if paused
if(el.pause) return;
// pause until animation has finished
el.pause = true;
// hide current item
$(el.items[el.currentitem]).fadeOut("slow",
function()
{
$(this).hide();
// move to next item and show
el.currentitem = ++el.currentitem % (el.items.size());
$(el.items[el.currentitem]).fadeIn("slow",
function()
{
el.pause = false;
}
);
}
);
};
this.each(
function()
{
if(this.nodeName.toLowerCase()!= "ul") return;
initTicker(this);
}
)
.addClass("newsticker")
.hover(
function()
{
// pause if hovered over
pauseTicker(this);
},
function()
{
// resume when not hovered over
resumeTicker(this);
}
);
return this;
};
})(jQuery);
$(document).ready(
function()
{
$("#news").newsTicker(2000);
}
);
</script>
------------------------------------
HTML code :
<!-- Begin HTML code -->
<ul id="news">
<li>first news</li>
<li>second news</li>
<li>third news</li>
<li>...</li>
<li>50th news</li>
</ul>
<!-- end HTML code -->