Not tested this yet, but the code would need to be tweaked.
Change
el.items = $("li", el);
to
el.items = $("> li", el);
And then use lists within lists:
<ul id="news">
<li><ul>
<li>News 1</li>
...
<li>News 10</li>
</ul></li>
<li><ul>
<li>News 11</li>
...
<li>News 20</li>
</ul></li>
</ul>
Hope this helps.
-- Sam
On Oct 10, 10:44 am, RDB <[EMAIL PROTECTED]> wrote:
> 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 -->
