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. I am writing this tutorial as there are readers ask about this after they read my tutorial about content slider.

There are a lot of great tutorials discussing on how to implement news ticker, however most of the tutorials that i found are not really suitable for a beginner. So, i decided to use jQuery and its plugin jCarousel Lite to create 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.

Best Cloud Hosting for Wordpress

Let’s start to create our news ticker using jCarousel Lite. Download both jQuery and jCarousel Lite before we can start.


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.

view plaincopy to clipboardprint?
  1. <html>
  2. <head>
  3. <link rel=“stylesheet” href=“style.css” type=“text/css” media=“screen” />
  4. <script src=“jquery-latest.pack.js” type=“text/javascript”></script>
  5. <script src=“jcarousellite_1.0.1c4.js” type=“text/javascript”></script>
  6. </head>
  7. </html>

Step 2

In the same document, create a <div> and name it as “newsticker-demo”. Basically, this is the container for the news ticker. We will have another <div> 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” <div>, create an <ul> element. Each news will be an individual <li> element. In this example, i had created 6 news, so i will have 6 <li> 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.

view plaincopy to clipboardprint?
  1. <li>
  2.     <div class=“thumbnail”>
  3.         <a href=“#”><img src=“images/1.jpg”></a>
  4.     </div>
  5.     <div class=“info”>
  6.         <a href=“”>The Knight and the Lady</a>
  7.         <span class=“cat”>Category: Illustrations</span>
  8.     </div>
  9.     <div class=“clear”></div>
  10. </li>

Step 4

After you created your <li> element, it is the time for us to configure the jCarousel. Under the <head>, add these scripts:

view plaincopy to clipboardprint?
  1. <script type=“text/javascript”>
  2. $(function() {
  3. $(“.newsticker-jcarousellite”).jCarouselLite({
  4.         vertical: true,
  5.         visible: 3,
  6.         auto:500,
  7.         speed:1000
  8.     });
  9. });
  10. </script>

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.

Best Cloud Hosting for Wordpress

Step 5

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

view plaincopy to clipboardprint?
  1. * { margin:0; padding:0; }
  2. #newsticker-demo {
  3. width:310px;
  4. background:#EAF4F5;
  5. padding:5px 5px 0;
  6. font-family:Verdana,Arial,Sans-Serif;
  7. font-size:12px;
  8. margin:20px auto;
  9. }
  10. #newsticker-demo a { text-decoration:none; }
  11. #newsticker-demo img { border2px solid #FFFFFF; }
  12. #newsticker-demo .title {
  13. text-align:center;
  14. font-size:14px;
  15. font-weight:bold;
  16. padding:5px;
  17. }
  18. .newsticker-jcarousellite { width:300px; }
  19. .newsticker-jcarousellite ul li{ list-style:nonedisplay:blockpadding-bottom:1pxmargin-bottom:5px; }
  20. .newsticker-jcarousellite .thumbnail { float:leftwidth:110px; }
  21. .newsticker-jcarousellite .info { float:rightrightwidth:190px; }
  22. .newsticker-jcarousellite .info { displayblockfont-size:10pxcolor:#808080; }
  23. .clear { clearboth; }



Please enter your comment!
Please enter your name here