Vertical Scrolling News Ticker With jQuery jCarouse

News Ticker is a fantastic way to present headlines or minor updates to your readers. The smooth scrolling effect will attract your readers and generate more clicks to your site.

This is a simple yet powerful news ticker.

Why i choose jCarousel Lite? it is because jCarousel Lite is a tiny but powerful plugin. Furthermore, you can easily tweak/configure it to achieve different effects. News ticker is just a sample application for this plugin.

 

Step 1

Let’s create a blank index.htm file, and include jQuery and jCarousel Lite. Also, create a blank style.css file for later use.

Step 2

In the same document, create a

and name it as “newsticker-demo”. Basically, this is the container for the news ticker. We will have another

class name “newsticker-jcarousellite”. Remember, this is very important and you will need to use the same class name when you configure jCarousel Lite.

Step 3

In the “newsticker-jcarousellite”

, create an

    element. Each news will be an individual

  • element. In this example, i had created 6 news, so i will have 6
  • elements(but i am not going to show all). We will have the thumbnail float to the left, while the title and other information float to the right.

  • The Knight and the Lady
    Category: Illustrations

  • Step 4

    After you created your

  • element, it is the time for us to configure the jCarousel. Under the , add these scripts:


    $(function() {
    $(".newsticker-jcarousellite").jCarouselLite({
    vertical: true,
    visible: 3,
    auto:500,
    speed:1000
    });
    });

    The script itself is pretty straight forward. The “auto:500″ means it will auto-scroll every 500ms. There are a lot of options which you can configure easily. Refer the documentation for more information.

    Step 5

    Basically you had done everything, except styling your content. So, just copy and paste the scripts below in your style.css file.

    * { margin:0; padding:0; }

    #newsticker-demo {
    width:310px;
    background:#EAF4F5;
    padding:5px 5px 0;
    font-family:Verdana,Arial,Sans-Serif;
    font-size:12px;
    margin:20px auto;
    }

    #newsticker-demo a { text-decoration:none; }
    #newsticker-demo img { border: 2px solid #FFFFFF; }

    #newsticker-demo .title {
    text-align:center;
    font-size:14px;
    font-weight:bold;
    padding:5px;
    }

    .newsticker-jcarousellite { width:300px; }
    .newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
    .newsticker-jcarousellite .thumbnail { float:left; width:110px; }
    .newsticker-jcarousellite .info { float:right; width:190px; }
    .newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

    .clear { clear: both; }

    Download: http://www.htmldrive.net/items/download/397

Leave a comment