Les images GIF animées sont populaires sur Internet car elles peuvent être facilement partagées et consommées assez rapidement. En utilisant le langage HTML de base, vous pouvez incorporer des images dans une page comportant une animation, sans recourir à aucune autre technologie. Certes, il existe des plugins pour animer des sprites ou des arrière-plans, mais les GIF sont un concept totalement différent.
Dans ce tutoriel, je veux montrer comment nous pouvons construire une galerie d'images qui optimise l'affichage d'images animées. Vous pouvez voir une fonctionnalité très similaire sur Giphy qui est également où j'ai téléchargé les images pour ma démo. Je code ma propre méthode qui ne suit pas exactement le même processus que Giphy - mais le résultat final est pratiquement identique et fonctionne très bien pour tous les navigateurs modernes.
Live Demo - Télécharger le code source
Commencer
Premièrement, nous devrions télécharger une copie locale de jQuery et la stocker avec les autres fichiers du projet. Je crée une page d'index avec une feuille de style externe appelée styles.css.
Maintenant, à l'intérieur du corps, je suis en train de créer une liste non ordonnée d'éléments d'image. Étant donné que ces vignettes ont toutes des tailles différentes, l’affichage sera différent en fonction des dimensions de l’image. J'utilise le HTML largeur et la taille attributs pour la configuration de valeurs personnalisées. Les images miniatures ont ainsi plus de temps à charger pour que le fichier GIF ne soit pas trop en retard.
Cet exemple de code comprend uniquement deux éléments de la liste complète. Pour chaque image, j'ai enregistré une copie du GIF animé, ainsi qu'une miniature JPG solide. Cet objet miniature est entouré d'un lien d'ancrage qui pointe vers l'image GIF animée. Alors maintenant, lorsque l'utilisateur clique sur une vignette, celle-ci mène directement à l'animation.
Mais de même, nous pouvons utiliser cette href valeur en tant que variable dans jQuery. Ainsi, chaque fois que l'utilisateur survole une vignette, nous remplaçons simplement l'image src pour afficher le GIF animé. Notez que la vignette et le format GIF ont tous les deux la même taille. De cette façon, nos paramètres HTML largeur / hauteur devraient fonctionner parfaitement sur l'une ou l'autre image.
Styles CSS
Il n'y a pas beaucoup de CSS à couvrir, mais je veux expliquer la configuration de ma galerie principale. #w est l'emballage extérieur qui est fixé à 750px de largeur. À l'intérieur nous avons un #contenu div qui est un conteneur interne pour les vignettes. J'ai étiqueté la liste non ordonnée avec un ID de #giflist pour clarifier mon sélecteur jQuery.
Je ne fais que styler les éléments de la liste intérieure afin qu'ils puissent flotter à gauche les uns à côté des autres. Naturellement, une fois que la prochaine image est trop grande, elle se décompose en une nouvelle ligne. Il y a quelques espaces supplémentaires avec des marges pour assurer beaucoup d'espace entre les vignettes.
De plus, étant donné que tous ces éléments internes sont flottants, la liste non ordonnée n'aurait généralement aucune valeur de hauteur. Il serait complètement supprimé du flux de pages sans l'utilisation d'une classe .clearfix. Évidemment, nous pourrions ajouter des traits d’interface plus élégants en utilisant CSS3, mais ces propriétés fondamentales suffisent pour que la galerie fonctionne correctement.
Remplacement d'image avec jQuery
L'ajout de la pièce finale à ce puzzle est accompagné d'un petit gestionnaire d'événements jQuery. Au bas de ma page avant la fermeture tag nous devons ouvrir un nouveau bloc JavaScript. Les liens d'ancrage entourant les images ne sont pas au niveau du bloc et ne peuvent donc pas être ciblés par un écouteur d'événement. Au lieu de cela, je cible les images elles-mêmes et nous lançons une nouvelle fonction chaque fois que l'utilisateur survole l'une de ces miniatures.
La méthode jQuery .hover () prend en compte deux paramètres de rappel que j'ai écrits en tant que fonctions. Le premier se déclenchera lorsque la souris de l'utilisateur entrera dans le sélecteur, et la deuxième fonction se déclenchera une fois que la souris de l'utilisateur aura quitté le sélecteur. Lorsqu'ils survolent pour la première fois l'image, nous devons extraire la valeur href correspondante du lien d'ancrage externe.
Ensuite, nous pouvons remplacer la valeur src de l'image pour afficher maintenant notre image GIF animée. Il sera dimensionné en fonction des attributs HTML width / height, mais il sera également entièrement chargé dans la mémoire cache. Vous avez peut-être remarqué que j'utilise un attribut de données HTML5 avec le nom data-orig. Une fois que nous avons remplacé la valeur src de l'image par le gif animé, il n'y a pas de moyen facile de revenir à la vignette.
Ainsi, au lieu de sauvegarder cela dans une variable, nous le conservons simplement dans la balise img.Désormais, lorsque l'utilisateur éloigne sa souris de l'image, nous remplaçons simplement la source par une copie de la valeur data-orig. Cela remet la vignette non animée à sa place, tandis que le GIF animé n’est qu’un clic (ou un survol).
Live Demo - Télécharger le code source
Fermeture
L'utilisation d'une bibliothèque JavaScript telle que jQuery fournit un excellent support pour les nouveaux navigateurs Web. Une chose à noter est sur les appareils mobiles, les utilisateurs devront appuyer sur chaque vignette pour afficher l'animation dans une nouvelle fenêtre. Mais l'interface utilisateur a été conçue pour fonctionner parfaitement pour tous les navigateurs modernes et même les anciennes versions héritées avec JavaScript activé. N'hésitez pas à télécharger une copie de mes codes sources et à voir si vous pouvez implémenter cet effet sur des projets Web similaires.