Que faire quand on a un portail vieille génération et que le nouveau tarde à arriver ? On cherche à améliorer l’ancien !
Davidolib a présenté sur son blog comment présenter ses nouveautés sous forme de carrousel avec un carrousel « flash », pour ma part j’ai préféré utiliser un carrousel javascript, moins gourmand à mon avis pour les navigateurs web.
Le script en question est disponible ici.
Il y a deux « parties » : le script stepcarousel.js et le code source de ce qui sera affiché. Sur notre carrousel d’actualités, notre code source se décompose de la façon suivante :
- dans la balise « head » de la page : le lien vers la feuille de style de votre site, le lien vers le script jquery.min.js nécessaire au bon fonctionnement de stepcarousel, le lien vers le script stepcarousel.js. Il y a également des définitions de style css pour les classes du carrousel et le script d’initialisation (vitesse de défilement, etc…)
- dans la balise « body » : chez nous le strict minimum : l’encart d’actualité et rien d’autre. Cet encart est intégré sur notre portail en tant que frame. Petites explications des différentes balises :
- <p id= »mygallery-paginate » style= »width: 500px; text-align:right; »> ……. </p> : c’est le conteneur de notre encart actualité
- <div id= »mygallery » class= »stepcarousel »>………</div> : l’encart actualité
- <div class= »belt »> ………………………………….</div> : le « bandeau » de l’encart dans lequel les actualités vont défiler
- <div class= »panel »>…………………………………</div> : UNE actualité. Il y aura donc dans le <div class= »belt »>…..</div> autant de <div class= »panel »> ……</div> que d’actualités.
Pour que la présentation de nos actualités soit « uniforme », elles sont écrites sous forme de « tableau », avec une image, le titre, le résumé de l’actualité, un lien pour en savoir plus. Au final, ça ressemble donc à cela :
Avant de vous donner le code complet, petit bilan des points positifs et négatifs de ce script :
- point positif : ça nous a permis de donner à moindre frais (juste quelques heures de travail) un coup de jeune à notre portail, en lui donnant un aspect plus visuel et plus dynamique
- points négatifs : ils sont tous au niveau du « back-office »
- la mise à jour est assez fastidieuse et on reste dans le web « statique » : édition d’un fichier html, avec soit la possibilité de modifier le fichier déjà en ligne au risque d’avoir des coquilles visible au public le temps de l’édition du fichier, soit la possibilité de faire le travail sur un fichier « actualites_test.html » qui une fois finalisé viendra remplacer actualites.html
- nécessité de connaître un minimum le html : ce sont donc toujours les mêmes personnes qui sont sollicitées pour mettre en ligne une nouvelle actualité !
- impossible de planifier les dates de début et de fin d’affichage
Heureusement l’arme absolue pour contourner ces points négatifs existe et s’appelle php-mysql ! L’amélioration du « back-office » de ce carrousel sera le cadre du prochain article !
Comme promis, le code complet :
<html>
<head>
<link rel="stylesheet" href="url de votre feuille de style css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="url du script stepcarousel.js"></script>
<style type="text/css">
p.corpsactu{
padding-top:20px;
padding-bottom:20px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #264C99;
}
.stepcarousel{
position: relative; /*leave this value alone*/
border: 1px solid aliceblue;
overflow: scroll; /*leave this value alone*/
width: 540px; /*Width of Carousel Viewer itself*/
height: 250px; /*Height should enough to fit largest content's height*/
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 520px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:4000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: false, moveby: 1, leftnav: ['./images/arrowl.gif', 0, -30], rightnav: ['./images/arrowr.gif', -30, -30]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
</head>
<body>
<p id="mygallery-paginate" style="width: 500px; text-align:right;">
Actualité <span id="statusA"></span> sur <span id="statusC"></span>
<img src="./images/opencircle.png" data-over="./images/graycircle.png" data-select="./images/closedcircle.png" data-moveby="1" />
</p>
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<table border=0 height="240">
<tr valign="middle">
<td><img src="url de votre image" align="left" style="padding-right:10px;" border="0"></img></a></td><td>
<span class="FRAME_TITLE">Titre de l'actualité 1</span>
<p class="corpsactu">Résumé de l'actualité 1</p>
<p align="right"><a class="encart" href="url de la page" target="_blank">Texte du lien "en savoir plus"</a></p>
</td>
</tr>
</table>
</div>
<div class="panel">
<table border=0 height="240">
<tr valign="middle">
<td><img src="url de votre image" align="left" style="padding-right:10px;" border="0"></img></a></td>
<td>
<span class="FRAME_TITLE">Titre de l'actualité 2</span>
<p class="corpsactu">Résumé de l'actualité 2</p>
<p align="right"><a class="encart" href="url de la page" target="_blank">Texte du lien "en savoir plus"</a></p>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Et hop, dans le violon.... 