Intégrer des GIF Animés Comme Facebook avec jqGifPreview
Twitter et Facebook ont beaucoup de gens partage de GIF animés du quotidien. Si ceux-ci sont tous joués automatiquement, ils pourraient être macabres dans un fil.
Les deux réseaux contournent cela avec un fonction de prévisualisation pour tous les GIF. Cela permet à l'utilisateur de choisir quelles animations ils veulent voir en choisissant quand démarrer / arrêter l'animation.
Avec le plugin jqGifPreview, vous pouvez apporter cette même fonctionnalité sur votre site web.
Ce plugin jQuery gratuit fonctionne sur tous les fichiers GIF de la page ou peut spécifiquement cibler ceux que vous souhaitez. C'est une ressource fantastique, mais cela prend un peu de temps à mettre en place.
Un GIF en pause est vraiment juste une image de l'animation, affiché sur la page.
Malheureusement, ce plugin ne fait pas tirer automatiquement une image statique du GIF pour vous. Mais vous pouvez accomplir cela en utilisant PHP ou n’importe quel autre langage de base. Ainsi, avec un peu de code, cela peut être automatisé..
Ce plugin utilise un attribut data- * pour stocker l'emplacement de l'image GIF. Lorsque l'utilisateur clique sur l'image, elle se charge automatiquement dans le src attribut de l'image et être affiché à l'écran.
Simple, efficace et certainement un effet soigné! Vous avez seulement besoin des fichiers CSS / JS pour ce plugin que vous pouvez tirez directement de GitHub. Et bien sûr, vous allez besoin d'une copie de jQuery, aussi.
À partir de là, vous configurez votre image comme suit:
Le principal src attribut devrait contient l'image statique. Vous pouvez soit créer un script pour le générer, soit éditer et télécharger manuellement un plan statique pour chaque image GIF..
le data-gif attribut détient le vrai GIF animé et ils vont échanger sur clic si vous cibler la classe d'image principale (dans ce cas, c'est .myImg). Maintenant, tout ce dont vous avez besoin est d’une ligne de jQuery pour que tout fonctionne:
$ (". myImg"). jqGifPreview (); Certainement l’un des plugins jQuery les plus cools que j’ai vu ce mois-ci et il est assez facile à installer.
Vous pouvez en apprendre plus en visitant le Page GitHub et il y a aussi un aperçu démo en direct hébergé sur le site du développeur.
