Le module jcarousel permet facilement d’intégrer un carousel dans une page Drupal.
Il existe deux manières pour ajouter un carousel :

  • via views : méthode la plus simple, permettant de sélectionner les données et la mise en forme en back-office
  • via l’API (jcarousel_add($class_name, $settings), méthode plus complexe nécsessitant de mettre les mains dans le code mais offrant un contrôle total du code

Nous allons dans ce tutoriel travailler avec la première solution afin de créer un block grâce à views. Cette méthode permet de configurer un certain nombre de paramètres directement en backoffice : type de défilement, temps de pause etc. En revanche ce mode de fontionnement n’offre pas la possibilité d’ajouter les boutons « play » et « stop » permettant d’arrêter et de reprendre le défilement.

Alors comment faire si vous souhaitez garder la souplesse de views tout en bénéficiant de la customisation offerte par jcarousel_add ? Et bien il va falloir mettre les mains dans le cambouis et modifier le template d’affichage du carousel.

  1. Pré-requis 
  1. Création du carousel et affichage en page d’accueil

Une fois le module activé, rendez-vous sur la page de gestion des vues (admin/structure/views) et créez-en une nouvelle (de type block) en choisissant le format d‘affichage (display format) « jCarousel » :

createBlock

Pour les besoins de ce tutoriel, nous n’allons pas customiser la vue. Enregistrer-là et ajouter ce block nouvellement créé dans une région de votre site (admin/structure/block). Normalement vous obtiendrez quelque chose comme ceci :

carousel

Il est possible de modifier le nombre d’items affichés, de rajouter les numéros pour naviguer d’un slide à un autre via les settings du jCarouel disponible dans la gestion de la vue ; je ne vais pas m’attarder sur ce point dans ce tutoriel :

blocStyleOptions

  1. Ajout des boutons play / stop

Le principe va être le suivant : 

  • Positionner les contrôles html (liens, boutons) dans le template
  • Récupérer l’instance javascript du carousel créé par drupal
  • Attacher les actions aux boutons

Il faut tout d’abord copier le fichier « jcarousel-view.tpl.php » (modules\jcarousel\includes) dans votre thème afin de le surcharger, c’est maintenant ce fichier qui sera utilisé pour afficher votre carousel.

Pour récupérer l’instance de carousel, il faut connaitre sont identifiant, pour cela voici une méthode simple : afficher le code source de votre page et rechercher la clé « "carousels": » qui doit être dans une chaîne javascript commençant par « jQuery.extend(Drupal.settings». Cette clé contient un tableau de carousel (un seul item dans notre cas) dont l’identifiant et du style « jcarousel-dom-1 » :

jquery

Une fois que vous avez cette identifiant, éditez le fichier de template et positionnez vos contrôles HTML où bon vous semble :

<ul class="btn-play-pause">
       <li><a href="javascript:void(0);" class="play" id="btn_play"><span class="hidden"><?php echo t("play"); ?></span></a></li>
       <li><a href="javascript:void(0);" class="pause" id="btn_pause"><span class="hidden"><?php echo t("stop"); ?></span></a></li>
</ul>

Ajoutez ensuite le javascript suivant :

<script type="text/javascript">
            //ajout d’une function de callback sur le carousel
                jQuery.extend(Drupal.settings.jcarousel.carousels[“jcarousel-dom-1”], {
                               "initCallback": jcarousel_initCallback
                               });

                   //function de callback permettant d’affecter les actions aux liens play / stop
                function jcarousel_initCallback(carousel) {
                               jQuery('#btn_pause').bind('click', function() {
                                               carousel.stopAuto();
                                 });
                               jQuery('#btn_play').bind('click', function() {
                                               carousel.startAuto();
                                 });
                }
</script>

Sauvegardez le fichier, videz les caches, rechargez la page… enjoy 😉