Complemento de vista previa de enlace
El complemento Vista previa del enlace muestra una vista previa de la página web a la que se vincula el enlace cuando el usuario pasa el cursor sobre el enlace y el enlace tiene la clase grabzit-preview. Esto saves el tiempo del usuario cuando decide qué enlaces es el que desea.
Para comenzar, coloque la línea de abajo en la parte inferior de la página, justo encima de la etiqueta del cuerpo de cierre. Luego reemplace la "CLAVE DE APLICACIÓN" con su clave de aplicación. A continuación, para agregar la capacidad de vista previa a un enlace, simplemente agregue el grabzit-preview clase al enlace. Esto se leerá automáticamente y se generará una vista previa.
new GrabzItPreview("Sign in to view your Application Key");
No tiene que establecer ninguna otra opción de configuración aparte de eso, sin embargo, puede especificar todas las parámetros generales, de imagen y GIF animados en el objeto de opciones. Por ejemplo, en el siguiente ejemplo, hemos establecido el ancho y la altura para que sean 200 x 200.
new GrabzItPreview("Sign in to view your Application Key", {"width": 200, "height": 200});
Si desea especificar una URL distinta de la que se encuentra en el atributo href. Puede especificar uno utilizando el grabzit-href atributo por ejemplo.
<a href="http://example.com" grabzit-href="https://www.tesla.com" class="grabzit-preview">My Example</a>
¡Siéntase libre de alterar el JavaScript o el CSS como desee! Sin embargo, ofrecemos clases especiales de CSS que puede usar para diseñar el cuadro de vista previa, que incluyen: grabzit-preview-container, grabzit-preview-caption, grabzit-preview-loader y grabzit-preview-screenshot.
Instalación de GrabzIt Preview en un blog o CMS
GrabzIt Preview es totalmente compatible con un blog o CMS, como WordPress, Drupal y Joomla. Solo abre blog-or-cms-install.txt encontrado en la descarga del complemento, esto incluye todos los JavaScript y CSS necesarios en un bloque. Esto se puede insertar into un widget que acepta HTML sin formato, tales widgets están presentes en la mayoría de los blogs o sistemas de gestión de contenido. Recuerde ubicarlo en la parte inferior de la página después del contenido.
¡Este complemento de JavaScript es completamente de código abierto! Si desea ver o mejorar el código fuente, puede encontrarlo en GitHub.