Wouldn’t it be nice if you could see the webpage before opening it? If you are using a MacBook with a force touch trackpad you can do this by force touching on any link when using Safari. Wikipedia also offers a different kind of link preview on all their internal links. This article explains how to achieve this kind of functionality on your site with some vanilla JavaScript, HTML and CSS.
Unlike other solutions that require you to add an image of the link in a data attribute this script relies on iframe embeds. You may be screaming out loud on how ineffient it is and yes you’re right. You can choose to defer the iframe preview load but it still not very efficient as opposed to pure image previews. On the bright side, you see live previews!
Initializing the script
Add the following code below above </head> in your website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"</script>
<link href="https://rawgit.com/shaneapen/Image-Preview-for-Links/master/image_preview_for_links.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
$('#p1 a').miniPreview({ prefetch: 'pageload' });
$('#p2 a').miniPreview({ prefetch: 'parenthover' });
$('#p3 a').miniPreview({ prefetch: 'none' });
});
</script> <script src="https://rawgit.com/shaneapen/Image-Preview-for-Links/master/image_preview_for_links.js"></script>Next, let’s add the necessary tags to the HTML to mark the links.
HTML Markup
The mark up is straight forward. All you have to do is wrap up the links in a paragraph or div with any of the following three ids:
- id=”p1″: Link previews are fetched as soon as the page is loaded, therefore, previews are shown instantly on hover. Optimal if the number of links is limited to a few.
- id=”p2″: In this mode, all the link previews are fetched when the user hovers the parent region(the region within this id).
- id=”p3″: This is slower than the other two but saves bandwidth. Link Previews are loaded only when the user hovers the particular link.
You can use any ID name for the parent div, but don’t forget to initialize it with the required prefetch mode in the above script.
Though you can use the third mode to dynamically load link previews, it still very inefficient as opposed to loading a simple image preview. So, only use this script if you understand how it works. Also, feel free to make any changes if needed.
With some tweaks to the script, you can also make it behave like Apple‘s link preview feature in Safari. This way you can interact with web page just after hovering without even leaving the page!
Codepen Demo
Switch to the HTML tab to see the HTML markup. See a live link preview of it in the results pane.
Linkz.ai
Linkz.ai is a relatively new freemium service that generates really cool link previews. The free version can get you 2500 unique previews/mo and paid plans start at $5. It offers Wikipedia like hover cards with descriptions. Rather than me writing more about it, why don’t you try it out yourself – Linkz.ai demo.
If you have any questions or require any help please leave a comment and I will help you as fast as possible.
This is superb, thank you!
This needs to be a Chrome Extension.
How do you convert this to a Microsoft word Macro? If this is already done. Can somebody post the link here?