Faites défiler le module Newsflash de Joomla avec jQuery Tabs

articles & tutoriels

Faites défiler le module Newsflash de Joomla avec jQuery Tabs

Ce tutoriel décrit comment modifier le module Newsflash (mod_newsflash) de Joomla 1.5 pour qu'il permette soit de présenter les news sous forme d'onglets, soit de les faire défiler à la façon d'un carrousel. La différence entre un carrousel à boutons ou une boîte à onglets ne se fera qu'à l'affichage, en utilisant CSS. Ce tutoriel répond à un besoin qui s'est présenté en page d'accueil des sites de Scopitone et Stereolux.

Le module Newsflash à modifier se trouve dans /modules/mod_newsflash/. Il s'agit de redéfinir les fichiers template suivants :

/modules/mod_newsflash/tmpl/vert.php : liste de news verticale
/modules/mod_newsflash/tmpl/horiz.php : liste de news horizontale
/modules/mod_newsflash/tmpl/_item.php : corps d'une news

Surcharge de templates Joomla

Nous n'allons pas modifier directement le template du module. En cas de mise à jour de celui-ci, nos modifications seraient perdues. De plus, les bonnes pratiquent veulent qu'une extension soit gardée intacte dès lors qu'elle a été versionnée et distribuée. Nous allons donc surcharger (redéfinir) le template du module dans le template global du site.

À la génération du rendu, Joomla vérifie la présence de templates modifiés dans le dossier html du template. Lorsqu'il ne trouve pas de surcharge, il utilise le template intégré au module. Il est possible de surcharger les composants de la même manière que les modules.

Pour ce faire, on recopie l'arborescence du dossier /modules/mod_newsflash/tmpl/ dans /templates/template_actif/html/mod_newsflash/ l'arborescence du module à partir du dossier tmpl.
On aura donc : /templates/template_actif/html/mod_newsflash/vert.php.

Fichier template de la liste de news

Nous choisissons ici de modifier l'affichage vertical, défini dans le fichier vert.php. Nous aurions pu choisir le template horizontal comme base, cela n'a pas d'importance puisque la mise en forme sera gérée exclusivement en CSS.
Le code ci-dessous génère le HTML de la liste de news :

<?php defined('_JEXEC') or die('Restricted access'); ?>
<ul id="tabNav">
	<?php
		$liste = modNewsFlashHelper::getList($params, $access);
		foreach ($liste as $item) {
			echo '<li><a href="#info'.$item->id.'">'.$item->id.'</a></li>';
		}
	?>
</ul>
<?php for ($i=0, $n=count($list); $i < $n; $i++) :
	modNewsFlashHelper::renderItem($list[$i], $params, $access);
	if ($n > 1 && (($i < $n - 1) || $params->get('showLastSeparator'))) : ?>
 	<?php endif; ?>
<?php endfor; ?>

Fichier template du corps d'une news

Nous allons maintenant modifier le fichier _item.php. Il contient le code PHP qui récupère les données à afficher pour chaque article. :

<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>
<div id="info<?php echo $item->id; ?>">
	<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
	<tr>
		<td class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>" width="100%">
		<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
			<a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>">
				<?php echo $item->title;?></a>
		<?php else : ?>
			<?php echo $item->title; ?>
		<?php endif; ?>
		</td>
	</tr>
	</table>
	<?php endif; ?>

	<?php if (!$params->get('intro_only')) :
		echo $item->afterDisplayTitle;
	endif; ?>

	<?php echo $item->beforeDisplayContent; ?>

	<table>
		<tr>
			<td valign="top" ><?php echo $item->text; ?></td>
		</tr>
		<tr>
			<td valign="top" >
				<?php if (isset($item->linkOn) && $item->readmore && $params->get('readmore')) :
					echo '<a class="readmore" href="'.$item->linkOn.'">'.$item->linkText.'</a>';
				endif; ?>
			</td>
		 </tr>
	</table>
</div>

Animation des news avec jQuery

Nous allons maintenant animer la liste d'articles de news en utilisant la bibliothèque jQuery. Pour cela, faites appel à la dernière version du framework jQuery, par exemple depuis Google Libraries API.

L'appel de scripts depuis un référentiel comme celui de Google accélère le chargement des pages puisqu'il y a de grandes chances que l'internaute ait déjà visité un site qui utilise également ces scripts, et qu'ils aient été mis en cache par son navigateur. Le mieux est d'insérer ce code entre les balises <head> de la page où apparaîtra le module Newsflash :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Si votre site utilise à la fois jQuery et Mootools, il vous faudra appeler la fonction noConflict() avant tout appel à jQuery :

<script type="text/javascript">jQuery.noConflict();</script>

Le code Javascript ci-dessous est à insérer tout à la fin du fichier vert.php.

<script type="text/javascript">
	jQuery(function () {
		var tabContainers = jQuery('div#flashinfo > div');
		
		jQuery('div#flashinfo ul#tabNav a').click(function () {
			tabContainers.hide().filter(this.hash).show();
			
			jQuery('div#flashinfo ul#tabNav a').removeClass('active');
			jQuery(this).addClass('active');
			
			return false;
		}).filter(':first').click();
	});
</script>

Intégration CSS

Il ne reste plus qu'un travail d'intégration CSS. Vous pouvez vous inspirer des démonstrations sur le site de jQuery Tabs. Quelques pistes pour transformer les liens en boutons ou en onglets :

Cacher le texte des liens avec font-size: 0; ou un text-indent négatif
Leur affecter un background et des dimensions fixes
Y ajouter des effets au survol avec la pseudo-classe :hover

07/07/2011, modifié le 29/08/2011

vincentrobic.com
webmaster

articles & tutoriels