RSS news ticker using jquery and Slick RSS module in joomla

Let me clear first about what is Slick RSS

Slick RSS is a joomla module that Parse and Display RSS Feed News with DHTML Teaser Tooltip. For details pls visit this link.

ok , let me tell what I am going to do next. That module is great to show rss feed from another site and I want to use it as a news ticker and it can be named as rss news ticker. ok then let’s make it done.

I am going to use js library jQuery and it’s plugin BBCNewsTicker. Please download latest version of jquery and that plugin this the given link.

Now, install the module Slick RSS in your joomla site and publish in any module position. Now I am going to make little change in the module code so that it can be configured for newsticker.

open the file default.php from modules\mod_slick_rss\tmpl and check link near 39

[code language=”php”]
<ul class="slick-rss-list<?php echo $params->get(‘moduleclass_sfx’); ?>" id="slick-rss-list< ?php echo $params->get(‘moduleclass_sfx’); ?>" style="margin-left:0px;padding-left:0px;">
[/code]

here I am adding id to ul tag so that the jquery plugin can catch that and do newsticking 😛

oh btw,$params->get(‘moduleclass_sfx’) that is the class sufix that u add to that module, it urgent to give module suffix here and don’t give same class sufix for another copy of same module in same page. In that the first module be working as newsticker as both more than one module’s ul tag is getting same id.

Next task is to add jquery and it’s plugin and do that newsticking… 😀
I am putting them in index.php of the current active template. make folder named js in your current template folder if there is none and put the jquery file and it’s plugin in that folder . now put the these lines in your index.php template file

[code language=”javascript”]
<script src="<?php echo $this->baseurl; ?>/templates/js/jquery-1.2.6.pack.js"></script>
<script src="<?php echo $this->baseurl; ?>/templates/js/newsticker.js"></script>
<script type="text/javascript">// < ![CDATA[
jQuery.noConflict();
jQuery(document).ready( function(){
var options = {newsList: "#slick-rss-list_rssnews", tickerRate: 80, loopDelay: 3000, startDelay: 10, placeHolder1: "_"}

jQuery().newsTicker(options);
});
// ]]></script>
[/code]

Look the above code I used the jquery file name jquery-1.2.6.pack.js and it’s plugin newsticker.js .So if u are using latest version of jquery or it’s news ticker plugin then put the file names carefull in the code…

another line check here

[code language=”php”]
var options = {newsList: "#slick-rss-list_rssnews", tickerRate: 80, loopDelay: 3000, startDelay: 10, placeHolder1: "_"}
[/code]

here #slick-rss-list_rssnews # is jquery syntax to catch slick-rss-list_rssnews as id and _rssnews is the class suffix for the Slick RSS module that I put from admin panel in the module configuration. If you put any thing then the id will be like #slick-rss-list{class suffix here without 2nd bracket} in this format. I think you are clear.

Oh u may ask why I wrote that line jQuery.noConflict(); and jQuery in place of $ sign.. heh to avoid conflict with other js library. You can search jquery seach about this noConflict mode.

Another thing is put the above code in footer of yout index.php file so that the loading time of jquery and it’s plugin doesn’t make any problem for site loading. For first time before the site loaded completely(before the dom is ready) the rss feed will be shown as listed like

list1
list2
list2

so if u make the ul tag height as the the line height of list item from css then it will seems that before the dom ready first news is displayed. When the dom is ready jquery plugin will start to work 🙂

waiting for your feedback 😛

wana see demo of my work ? ok check here .If this link doesn’t work in future then check main domain of that link as this is a demo site now 🙂