Comment développer les vignettes comme Google Images
Google Images exécute une interface utilisateur unique avec aperçus miniatures de nombreux sites Web. En cliquant sur l'une de ces miniatures, l'écran est agrandi avec plus de détails et une plus grande image..
C'est l'une des meilleures fonctionnalités de galerie d'images que j'ai utilisées et maintenant, vous pouvez le cloner avec Gridder.js.
Ce plugin gratuit jQuery suit les traces de l'incroyable UX de Google en créant un plugin qui correspond à cet effet. Vous pouvez transformer n'importe quelle galerie de photos en une galerie de style Google Images avec toutes les mêmes animations et fonctionnalités d'affichage.
Je suis agréablement surpris par la rapidité et la facilité d'utilisation de ce plugin. Il suffit de cliquer sur une vignette affiche immédiatement un coup plus grand et les animations sont super propres.
Les images inclure une section pour le texte descriptif au cas où vous voudriez ajouter des détails ou des liens liés aux images. Cela fonctionne particulièrement bien pour les sites de portefeuille simples dans le but de se concentrer sur les images..
En plus de cela, vous pouvez extraire également du contenu via Ajax. Cela vous permet créer des vignettes dynamiques qui tire le contenu d'autres sites Web ou par le biais d'API.
Chaque clic événement offre une méthode de rappel, vous pouvez même exécuter d'autres plugins ou fonctions JavaScript aux côtés de Gridder. Avec autant d'options, il se sent pratiquement comme un cadre de grille entier!
Depuis Gridder fonctionne sur jQuery, il nécessite la dernière version en tant que dépendance. Mais c'est tout ce dont vous avez besoin (avec le fichier Gridder.js), et avec quelques lignes de HTML, vous pouvez faire fonctionner votre grille de manière fluide..
Vous devriez consulter la page GitHub pour instructions d'installation complètes mais voici un aperçu rapide à quoi ressemble le HTML:
Tout le contenu obtient tiré par JavaScript, de sorte que vous pouvez charger à peu près tout ce que vous voulez.
C'est un plugin incroyablement polyvalent avec des options pour changer la vitesse de l'animation, le ralentissement, le style du bouton de fermeture et le décalage du défilement pour quand l'utilisateur clique sur une nouvelle vignette.
Les développeurs débutants et professionnels trouveront beaucoup de valeur dans ce plugin. Cependant, si vous n'êtes toujours pas sûr si c'est pour vous, jetez un coup d'œil à la page de démonstration de Gridder et jouez.
