RoyalSlider : tutoriel et révision du code

Il y a beaucoup de plugins du style des carrousels (slide), et ils ont tous des forces et des faiblesses différentes. Cependant, RoyalSliderRoyalSlider (licence : commerciale, CodeCanyon : RoyalSliderCodeCanyon : RoyalSlider, prix : 12 dollars) de Dmitry Semenov est une galerie d'images jQuery réactive et activable également via les touches du clavier. C'est l'un des meilleurs carrousels que j'ai pu voir. L'auteur a travaillé dur pour s'assurer qu'il soit rapide et efficace, se basant sur des chargements intelligents, sur des transitions CSS3 accélérées et sur un algorithme de gestion de mémoire qui assure que seules les diapositives visibles sont dans le DOM à tout moment.

Le plugin est activement maintenu et a connu une douzaine de mises à jour depuis sa sortie en août 2011. Il est distribué exclusivement par l'intermédiaire de CodeCanyonCodeCanyon, mais la documentationDocumentation et les détails d'intégration pour WordpressIntégration pour Wordpress sont également sur le site de Dmitry. Acheter RoyalSlider donne accès à un ensemble de modèlesModèles qui comprend plusieurs types de galeries qui devraient s'ajouter facilement dans vos projets.

Depuis que le plugin a été publié, il a reçu des commentaires extrêmement positifs. Dmitry a vendu plus de 4500 licences, et a obtenu une cotation « 5 étoiles » basée sur 378 critiques.

RoyalSlider a été testé sur IE7+, iOS, Opera Mobile, Android 2.0+, Windows Phone 7+ et BlackBerry.

RoyalSlider peut être téléchargé comme une archive (qui contient la source originale), ou comme un package personnalisé créé à l'aide de l'outil de Dmitry disponible sur le web (l'accès est accordé une fois qu'une licence a été achetée).

Pour ajouter RoyalSlider à une page, assurez-vous que vous utilisez jQuery 1.7 ou ultérieur et puis incluez la feuille de style et le code JavaScript :

<link rel="stylesheet" href="royalslider/royalslider.css">
<script src="royalslider/jquery.royalslider.min.js"></script>

Le plugin s'attend à trouver un élément conteneur qui a la classe royalSlider. Chaque élément enfant est alors considéré comme un carrousel :

<div class="royalSlider rsDefault">
 <!-- image simple -->
 <img class="rsImg" src="image.jpg" alt="image desc" />

 <!-- diapositive chargée -->
 <a class="rsImg" href="image.jpg">image desc</a>

 <!-- image et contenu -->
 <div>
   <img class="rsImg" src="image.jpg" data-rsVideo="https://vimeo.com/44878206" />
   <p>Du contenu...</p>
 </div>
</div>

Ensuite il reste à appeler l'instruction $.fn.royalSlider :

$(function() {
 $('.royalSlider').royalSlider();
});

À ce stade, des options peuvent être fournies, et croyez-moi, il y en a beaucoupListe des options !

Les modèles distribués avec RoyalSlider fournissent des exemples complets avec les codes HTML, CSS et JavaScript. L'exemple ci-dessus est adapté pour une galerie, et il intègre quelques caractéristiques intéressantes :

• navigation par défilement des miniatures (scrolling) ;
• mode plein écran ;
• chargement automatique des images de qualité supérieure en mode plein écran ;
• images dynamiques utilisant des médias ;
• navigation via les flèches du clavier.

Pour initialiser une telle galerie, tout ce qui est nécessaire sont des images convenables et l'instruction $.fn.royalSlider avec les options suivantes :

$('#gallery-1').royalSlider({
 fullscreen: {
   enabled: true
 , nativeFS: true
 }
, controlNavigation: 'thumbnails'
, autoScaleSlider: true
, autoScaleSliderWidth: 960
, autoScaleSliderHeight: 850
, loop: false
, numImagesToPreload: 4
, arrowsNavAutoHide: true
, arrowsNavHideOnTouch: true
, keyboardNavEnabled: true
});

Les noms des options sont assez verbeux, il est ainsi facile de dire ce qu'ils font, mais je vais présenter les principales ci-dessous :

• autoScaleSlider : cela met à jour automatiquement la hauteur du carrousel en se basant sur la largeur. La plupart des exemples utilisent cette option ;
• numImagesToPreload : définit le nombre d'images à charger par rapport à l'image actuelle ;
• arrowsNavAutoHide : masque la navigation par les flèches lorsque l'utilisateur n'interagit pas avec le plugin.

RoyalSlider intègre plusieurs façons de supporter les écrans tactiles. Les gestes de balayage fonctionnent comme prévu, et il y a quelques options pertinentes :

• arrowsNavHideOnTouch : toujours masquer les flèches sur les écrans tactiles ;
• sliderTouch : accepte les diverses pressions sur l'écran.

Il y a aussi des événements pour faire face aux différents gestes. Vous pouvez les ajouter comme ceci :

sliderInstance.ev.on('rsDragStart', function() {
 // début d'un "glisser" avec la souris ou par pression
});

sliderInstance.ev.on('rsDragRelease', function() {
 // fin d'un "glisser" avec la souris ou par pression
});

J'ai testé le plugin à l'aide de plusieurs exemples sur iOS et Android 4.1 et j'ai été impressionné de manière générale par la performance.

Quand je regarde les plugins jQuery, je parcours d'habitude les conseils trouvés dans le guide de création de pluginGuide de jQuery. Je voudrais seulement toucher un mot au sujet des plugins qui sont bien écrits, et vous seriez surpris du nombre qui ne le sont pas, étant donné que l'équipe de jQuery a travaillé dur pour documenter exactement la manière d'écrire un plugin. Dans cet esprit, j'ai jeté un coup d'œil aux sources de RoyalSlider pour voir comment il est construit.

RoyalSlider est divisé en fichiers séparés à l'aide d'une approche modulaire. Ce qui permet à l'outil de création des packages d'inclure seulement ce qui est nécessaire, c'est en fait assez trivial de faire un package directement adapté à un projet donné. Le code est aussi régulièrement formaté, donc je recommande fortement de télécharger la version de développement, juste au cas où vous avez des questions qui ne trouvent pas de réponse dans la documentation. Le code est assez facile à comprendre pour un développeur jQuery de niveau intermédiaire.

La plupart du code du plugin est basé sur un constructeur JavaScript standard, ce qui ajoute à sa lisibilité. Cela m'a fait me demander si l'auteur a l'intention de l'étendre aux autres frameworks JavaScript, car il semble que la grande partie de la fonctionnalité est encapsulée habilement via l'API de jQuery.

En termes de codage DOM de bas niveau et de performance d'animation, il a les correctifs requestAnimationFrame de Paul Irish et de Tino Zijdel. Il utilise le préfixe CSS lorsque c'est nécessaire.

RoyalSlider ajoute ces méthodes et ces objets à $ :

• $.rsProto ;
• $.rsCSS3Easing ;
• $.rsModules ;
• $.fn.royalSlider.

En général, les plugins devraient limiter le nombre de choses qu'ils ajoutent à $, mais j'ai le pressentiment que l'auteur a pris soin d'exposer ici uniquement ce qui est nécessaire :

• espace de nommage et classes pour les événements et le CSS, par exemple : keydown.rskb ;
• traçage de statut en utilisant l'attribut .data.

La plupart des auteurs de plugin jQuery semblent manquer la section sur l'utilisation de $.extend pour gérer les options, mais j'ai été heureux de voir que Dmitry l'a fait. La méthode principale de jQuery renvoie également this, donc les appels après .royalslider peuvent être enchaînés comme prévu.

RoyalSlider a son propre site de supportSupport RoyalSlider, et l'auteur parle aussi aux utilisateurs par le biais de son compte Twitter : @dimsemenovCompte Twitter.

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original RoyalSlider: Tutorial and Code Review du site DailyJS.
Je remercie également FirePrawn pour sa relecture attentive et assidue.