Written by L’extension module J51-ImageHover permet de créer rapidement et facilement de belles galeries d’images avec des effets de survol fonctionnels, apportant une touche de style et un mode interactif à n’importe quelle page d’un site Web.
L’extension module J51-ImageHover permet de créer rapidement et facilement de belles galeries d’images avec des effets de survol fonctionnels, apportant une touche de style et un mode interactif à n’importe quelle page d’un site Web.
Article traduit par Serge Billon
Il y a un peu plus d’un an, nous (Joomla51) avons commencé le projet imagehover.css en parallèle (http://www.imagehover.io).
Notre intention avec ce projet était de créer une bibliothèque CSS responsive et polyvalente, qui permettrait aux utilisateurs de créer facilement des effets de survol sur des images vers du texte. Il y a eu quelques progrès très récemment en CSS, en particulier au sujet de l’animation et nous nous plaisons à croire que nous avons utilisé ces avancées à leur plein potentiel. Le fait d’être totalement axé sur CSS garantit des transitions souples et polyvalentes pour tous les appareils et toutes les plates-formes avec pratiquement aucune dépendance.
L’intégralité de votre bibliothèque tient dans dans un mouchoir de poche et pèse 19 Ko. La bibliothèque est unique puisqu’elle utilise le même balisage pour chaque effet. Tout ce que vous avez à faire est d’inclure la classe appropriée de l’effet d’animation voulu dans votre balisage et la Bibliothèque CSS se chargera du reste.
Heureusement, imagehover.css est devenu immensément populaire et un peu plus d’un an après , nous avons décidé de créer un module Joomla qui permettrait aux utilisateurs de Joomla d’implémenter facilement la bibliothèque au sein de leurs projets. Notre plan pour le module était simple, créer une extension qui serait facile et souple à utiliser et qui mettrait en œuvre l’ensemble complet des fonctionnalités de la bibliothèque de imagehover.css.
Lors de la création du module, nous avons essayé de rendre l’extension aussi polyvalente que possible. Étant un club de template, nous espérons avoir une compréhension approfondie des fonctionnalités dont un utilisateur aurait besoin dans une telle extension.
Chaque image dans la galerie est entièrement redimensionnable et responsive, s’adaptant facilement à toutes les largeurs d’écran. Nous avons inclus un certain nombre d’options pour contrôler le nombre de colonnes à utiliser pour la galerie dans chacune des grandes tailles d’écran. Donc par exemple une galerie qui peut s’étendre sur 4 colonnes sur un bureau peut être configuré pour s’afficher dans une colonne simple ou double sur les petits écrans.
Des options de réglage de l’espacement horizontal et vertical sont également disponibles ce qui permet à l’utilisateur de passer facilement d’une disposition en mosaïque compacte à une mise en page ouverte plus spacieuse.
D’autres options incluent certains sélecteurs de couleurs pour définir la couleur de l’arrière-plan et du texte, ce qui vous permet d’intégrer facilement le style de votre galerie à celui de votre template Joomla. Des options d’alignement de texte existent également pour l’alignement vertical et horizontal du texte dans le cadre de l’image.
Les effets de survol peuvent être appliqués individuellement à chaque image de votre galerie afin que vous puissiez soit utiliser le même effet de survol dans votre galerie soit faire un mélange et adapter à votre propre goût avec un effet différent sur chaque image. Le choix vous incombe totalement. Vous pouvez ajouter autant d’images que vous souhaitez et avec chaque image, vous pouvez ajouter un titre et une légende à afficher au survol. Un champ est également disponible pour lier chaque image à une URL de votre choix. Cette URL peut correspondre à une page de votre site ou à un site externe.
Dernier point mais non le moindre, le module est complètement téléchargeable gratuitement et peut être utilisé sur tous les sites personnels comme commerciaux . Vous pouvez nous faire preuve d’un peu d’amour sous la forme d’une appréciation sur le répertoire d’extension Joomla si vous trouvez cette extension utile.
Et cela résume bien le module J51 ImageHover. Nous espérons que vous apprécierez autant l’utiliser que nous avons apprécié le créer. S’il y a des fonctionnalités que vous aimeriez voir implémentées dans le module, n’hésitez pas à le mentionner dans le forum Joomla51, nous l’examinerons avec enthousiasme et espérons que cela sera inclus dans les mises à jour futures.
À propos de l’auteur
Ciarán Walsh
Développeur pour Joomla51.com. Fait actuellement partie de l’équipe de développement de Joomla 4 pour les templates backend et frontend.