Le plug-in de prévisualisation de lien affiche un aperçu de la page Web à laquelle le lien renvoie lorsque l'utilisateur survole le lien et que le lien contient la classe. grabzit-preview
. Ce saves le temps de l’utilisateur pour décider quel lien est celui qu’il souhaite.
Pour commencer, placez la ligne ci-dessous au bas de la page, juste au-dessus de la balise de fermeture du corps. Puis remplacez la "CLÉ D'APPLICATION" par votre clé d'application. Suivant pour ajouter la possibilité de prévisualisation à un lien, ajoutez simplement le grabzit-preview
classe au lien. Celui-ci sera alors lu automatiquement et un aperçu généré.
new GrabzItPreview("Sign in to view your Application Key");
Vous n’avez pas besoin de définir d’autres options de configuration que celle-là, mais vous pouvez spécifier tous les paramètres. paramètres généraux, d'image et GIF animés dans l'objet options. Par exemple, dans l'exemple ci-dessous, nous avons défini la largeur et la hauteur sur 200 x 200.
new GrabzItPreview("Sign in to view your Application Key", {"width": 200, "height": 200});
Si vous souhaitez spécifier une URL autre que celle trouvée dans l'attribut href. Vous pouvez en spécifier un en utilisant le grabzit-href
attribut par exemple.
<a href="http://example.com" grabzit-href="https://www.tesla.com" class="grabzit-preview">My Example</a>
N'hésitez pas à modifier le code JavaScript ou CSS à votre guise! Cependant, nous fournissons des classes CSS spéciales que vous pouvez utiliser pour styler la zone de prévisualisation, notamment: grabzit-preview-container
, grabzit-preview-caption
, grabzit-preview-loader
et de grabzit-preview-screenshot
.
GrabzIt Preview est entièrement compatible avec un blog ou un CMS, tel que WordPress, Drupal et Joomla. Il suffit d'ouvrir blog-or-cms-install.txt trouvé dans le téléchargement du plugin, cela inclut tout le JavaScript et CSS requis dans un bloc. Cela peut alors être inséré into Un widget qui accepte le HTML brut, de tels widgets sont présents dans la plupart des systèmes de blog ou de gestion de contenu. N'oubliez pas de le localiser au bas de la page après le contenu.