Making our module look better is quite easy, as we are only using plain HTML for now. A bit of jQuery won't do any harm; in fact, it will look much better.
For this example, I've one jQuery plugin in mind: the Vertical news ticker plugin. We can find it on the jQuery site by searching for "Vertical news ticker", or we can download it at the following link:
http://plugins.jquery.com/project/vTicker.
Download the plugin, place the jquery.vticker.js
file
in modules/mod_tinynews/js/
, and we are done. We have the
necessary tool for our example. Our next step will be to change the
modules/mod_tinynews/tmpl/default_tmpl.php
file, just some cosmetic
changes, as follows:
<?php defined('_JEXEC') or die('Direct Access to this location is not allowed.'), ?> <div id="tinynews"> <ul> <?php foreach($news as $new){ echo "<li>"; echo "<b>".$new->title."</b><br/><br/>"; echo "".nl2br($new->text)."<br/><br/>"; echo "</li>"; } ?> </ul> </div>
We have prepared an unordered list of elements; the plugin will need that to
move the elements. Our next change is in the
modules/mod_tinynews/mod_tinynews.php
file. Here we need to add the
highlighted code:
... $document =& JFactory::getDocument(); $document->addscript(JURI::root(true).'modules'.DS.'mod_tinynews' .DS.'js'.DS.'jquery.vticker.js'), $document->addscript(JURI::root(true).'modules'.DS.'mod_tinynews' .DS.'js'.DS.'tinynews.js'), ...
This will load the necessary jQuery plugin. Now we need to make the necessary
plugin call. We will be doing that in our
modules/mod_tinynews/js/tinynews.js
file. We will replace its current
contents with the following code:
jQuery(document).ready(function($){ $('#tinynews').vTicker({ speed: 2000, pause: 4000, showItems: 1, animation: 'fade', mousePause: true }); });
We are calling the vTicker
function on the
#tinynews
DIV—that's the DIV containing our unordered
list of news. Let's take a quick look at the options:
speed
—here we can define the speed of the
scroll animationpause
—is the time between each scrolling
actionshowItems
—is used for stating the number of
items to be visibleanimation
—here we can use fade, for a fade in
or out animation, or leave the default for a sliding animationmousePause
—having this set to
true
will stop the animation when the mouse pointer is over
the tickerThese options will be very useful to modify the resulting effect. For example, I've added some more texts to our news, and our module now looks similar to the following screenshot:
I've tried to capture the moment of the fade, but it's much better to see it in action, so why don't you give it a try?
3.133.142.2