Présenter ses nouveautés sous forme de carrousel

Incipio dispose d’encarts de sélections. Ils permettent de présenter des listes de nouveautés ou des listes thématiques sous formes d’imagettes. Problème, c’est statique. On va donc voir comment ajouter un peu de mouvement à tout ça en collant un carrousel, type coverflow d’Itunes. On sort les gants, les tabliers, aujourd’hui, c’est bricolage.

Préparation du matériel

On va utiliser un outil tout fait qui s’appelle flShow, disponible ici : http://www.flshow.net/. J’ai pour ma part utilisé la version “carousel on transparent background” qui permet de customiser l’animation. Une fois flShow téléchargé, vous allez regrouper les imagettes dans le dossier “images”. Pour éviter d’obtenir une animation avec des imagettes de tailles différentes, mieux vaut leur donner toute la même hauteur à l’aide d’un logiciel type Gimp, Photoshop ou ce que voudrez. Ne vous embêtez pas à leur donner la taille qu’elles auront à l’affichage, tout se redimensionnera correctement.

Edition du fichier XML

Ensuite, on va éditer le fichier default.xml. D’abord, on ve renseigner la partie concernant les imagettes. La partie qui va nous intéresser se situe après la balise </options> :

Chaque imagette sera représenté par une balise <photo> qui va comprendre  un attribut href qui pointera vers la notice du SIGB correspondante. Ainsi quand on cliquera sur une imagette, on sera redirigé vers la notice correspondante. Pour obtenir ce lien, il suffit de prendre le “lien permanent” visible en bas de chaque notice d’Incipio. On va aussi ajouter un attribut title qui s’affichera dans un cadre transparent lorsque le souris survolera l’imagette. Enfin le contenu de la balise sera le fichier de l’imagette.

Un exemple sera plus parlant :

<photo href=http://www-bulco.univ-littoral.fr/clientBookline/service/reference.asp?INSTANCE=EXPLOITATION&OUTPUT=PORTAL&DOCID=175979&DOCBASE=ULTR target=_top title=Pack emploi : les nouvelles méthodes pour trouver votre job>./images/morin.jpg</photo>

On va pouvoir maintenant affiner les paramètres de l’animation. On peut prévisualiser notre carrousel en affichant la page  fullpage.html. Les paramètres sont dans la première partie du fichier xml dans la balise <options>.

Parmi les paramètres, vous pouvez agir sur le flou des imagettes à l’arrière plan, la taille maximale des imagettes, la vitesse de rotation, etc…Vous retrouverez tous les paramètres disponibles dans le wiki

Yapuka

Reste à insérer notre animation dans Incipio. On pourrait coller le code HTML de fullpage.html mais FCKEditor, l’éditeur HTML inséré dans Incipio ne permet pas d’insérer du javascript. On va donc contourner cette difficulté. Pour cela, copier le dossier contenant votre carrousel à la racine de votre site (donc certainement dans D:\inetpub\wwroot…). Ensuite ajouter un encart éditable dans lequel on va insérer un iframe. Voici le code que j’ai utilisé :

où j’ai un iframe de 600 pixels de haut sur 200 pixels de large, sans bordure, ni ascenseur.