Link Preview Plugin
The Link Preview Plugin shows a preview of the webpage the link is linking to when the user hovers over the link and the link has the class grabzit-preview. This saves the user time when deciding which links is the one they want.
To get started place the line below at the bottom of the page just above the closing body tag. Then replace the "APPLICATION KEY" with your actual application key. Next to add the preview ability to a link simply add the grabzit-preview class to the link. This will then be read automatically and a preview generated.
new GrabzItPreview("Sign in to view your Application Key");
You do not have to set any other configurations options than that, however you can specify all of the general, image and animated GIF parameters in the options object. For instance in the below example we have set the width and height to be 200 x 200.
new GrabzItPreview("Sign in to view your Application Key", {"width": 200, "height": 200});
If you want to specify a URL other than the one found in the href attribute. You can specify one by using the grabzit-href attribute for instance.
<a href="http://example.com" grabzit-href="https://www.tesla.com" class="grabzit-preview">My Example</a>
Feel free to alter the JavaScript or the CSS as you wish! However we provide special CSS classes that you can use to style the preview box, these include: grabzit-preview-container, grabzit-preview-caption, grabzit-preview-loader and grabzit-preview-screenshot.
Installing GrabzIt Preview on a Blog or CMS
GrabzIt Preview is fully compatible with a blog or CMS, such as WordPress, Drupal and Joomla. Just open blog-or-cms-install.txt found in the plugin download, this includes all the required JavaScript and CSS in one block. This can then be inserted into a widget that accepts raw HTML, such widgets are present in most blog or Content Management Systems. Remember to locate it at the bottom of the page after the content.
This JavaScript plugin is completely open source! If you want to view or improve the source code you can find it on GitHub.