Création de diaporamas (slideshow) et de carrousels jQuery dans Drupal 7. Partie 1
Il arrive assez souvent qu’on souhaite ajouter une touche spéciale, un peu animer le site. Les sites créés avec Drupal dans une installation de base ont un aspect statique et ordinaire, alors qu’on voudrait qu’ils soient originaux, dynamiques, colorés et vivants. Pour cela, on peut faire un menu déroulant, des pages mises à jour dynamiquement ou une bannière dans l’en-tête du site.
La connaissance du CSS nous aide beaucoup : grâce à lui, nous pouvons personnaliser le site, changer la palette de couleurs. Mais même en utilisant les thèmes standard, on peut rendre le site plus attrayant, peut-être pas parfait, mais quand même. Commençons par la bannière.
Autrefois, les bannières étaient presque toutes faites avec des images .gif qui supportent plusieurs images dans un seul fichier, ou avec des bannières Flash. Le développement des premières prenait du temps et n’était pas toujours aussi esthétique que les bannières Flash. Pourtant Flash, malgré sa beauté, a ses inconvénients, par exemple sa consommation élevée de ressources lors de l’affichage.
On pouvait aussi faire une bannière avec JavaScript, mais cela prenait encore plus de temps et demandait la connaissance de ce langage. Avec l’apparition du framework JavaScript jQuery, cela est devenu beaucoup plus simple et rapide, et il n’est même plus nécessaire de maîtriser JavaScript.
Nous avons un site en difficulté que nous allons continuer à améliorer :
Pour commencer, je propose de créer une région distincte où nous insérerons un bloc avec la bannière.
Ouvrons le fichier .info de notre thème, juste après la description des régions :
regions[content] = Content regions[right] = Right sidebar regions[left] = Left sidebar regions[footer] = Footer
Ajoutons notre propre région pour la bannière :
regions[topbanner] = Top banner
Ensuite, il nous faudra choisir quel type de bannière nous voulons. Si une simple succession d’images nous convient, on peut faire un slideshow avec le module Views_slideshow. Installez ce module ainsi que ses sous-modules Views Slideshow: SingleFrame et . Pour les installer, le module Views est nécessaire, que vous avez probablement déjà installé.
Views Slideshow: SingleFrame — réalise un slideshow dans un seul bloc.
— slideshow avec un menu composé de miniatures ou de titres de chaque diapositive.
Créons une nouvelle vue, dans le champ Tags, inscrivez slideshow :
Ajoutons maintenant des champs (fields) à afficher : j’ajouterai le nom complet de l’employé, son poste et sa photo. Vous pouvez ajouter le titre (title) du nœud, le corps (body) du nœud, etc.
Dans les filtres, ajoutez : Contenu : publié, Type de contenu = Employé (ou votre type de contenu Page, Story ou autre créé précédemment).
Pour le tri (Sort criteria), vous pouvez trier par Date de publication du nœud en ordre décroissant.
Ajoutez un affichage en bloc.
Dans les paramètres de base (Basic settings), choisissez le style slideshow. Une fenêtre de réglages des effets apparaîtra. Si ce n’est pas le cas, cliquez sur la roue dentée à côté de "style: slideshow".
Les paramètres du slideshow sont les suivants pour Slideshow mode: SingleFrame :
Timer delay : temps en millisecondes entre le changement de slides ;
Initial slide delay offset : temps en millisecondes avant le premier changement ;
Speed : vitesse à laquelle les slides changent ;
Controls : boutons textuels pour changer les slides ;
Pager : boutons numériques pour changer les slides ;
Image Counter : affiche le numéro du slide affiché ;
Items per slide : nombre de slides affichés simultanément ;
Effect : effet d’apparition du slide ;
Ce sont les principaux paramètres, les autres pourront aussi vous être utiles.
Pour Slideshow mode: ThumbnailHover :
Main frame fields : champs affichés dans le slide ;
Breakout fields : champs affichés dans le menu du slideshow. Vous pouvez ajouter des photos au format réduit, ce qui permet de faire un menu de petites images en dessous ;
Les autres paramètres sont similaires à ceux de Slideshow mode: SingleFrame.
Enregistrez la vue et si vous avez créé un affichage en bloc, affichez-le dans la région bannière créée précédemment.
Pour personnaliser l’apparence de la bannière, il faudra modifier la feuille CSS, par exemple style.css de votre thème, ce qui devra être fait manuellement selon la palette de couleurs choisie.
Dans les prochaines parties de ce tutoriel, nous créerons des boutons sous forme d’images, un bannière jQuery sans modules additionnels, et un carrousel jQuery.