Actuellement, e-majine ne propose qu'un système de défilement vertical des actualités dans le widget dedié.

Je cherchais une solution pour m'affranchir de ce format et avoir la possibilité de les faire défiler d'une autre manière.

Pour ce faire, j'ai utilisé JqueryCyclePlugin.

JqueryCyclePlugin est un plugin intéressant dans la mesure où il est facile à mettre en place et qu'il propose une multitude d'effets préprogrammés.

A cette adresse, on peut voir le plugin en action sur un contenant HTML , en bas de page.
(http://jquery.malsup.com/cycle/int2.html)

Voici comment procéder :

- Supprimer le comportement dynamique des actualités (vous obtenez n actus dans votre widget)

- Disposer les via CSS et le template last-elements.html les unes à cotés des autres (entourer d'une div les éléments "picture", "title" et "description" et placer cette div en

float:left;

)

- Entourer par la suite la

<mx:bloc id="news">

d'une seconde div et attribuer lui une autre class CSS. C'est cette classe qui permettra de cibler l'élément qu'on souhaite animer.

- Intégrer enfin dans votre template MainPage.html les lignes suivantes :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

Et amorcez l'animation en indiquant l'attribut CSS de la seconde div et l'effet souhaité :

<script type="text/javascript">
$(document).ready(function() {
    $('.attributCSS').cycle({
    fx: 'latransitionsouhaitee' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
  });
});
</script>

Libre à vous par la suite de choisir le comportement de défilement (haut, bas, droite, gauche, zoom, fondu, etc... Il en y en un tas !)

Amusez vous bien ;)