Scripts and Styles
Add the following code below above </head> in your website.
Now that you have added all the required files (It’s all that you need!! ) it’s time for the mark up.
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 page is loaded therefore previews are shown instantly on hover. Optimal if number of links are less.
- id=”p2″ : In this case the link previews are fetched when the user hovers the parent region(the region within that id).
- id=”p3″ : This is slower than the other two but saves bandwidth. Link Previews are loaded only when user hovers the link.
DEMO & HTML Markup
Switch to the HTML tab to see the HTML markup. See a live image link preview of it in the results pane.
NOTE: This trick may not work with sites like Google whose images can’t be fetched.
If you have any questions or requires any help please leave a comment and I will help you as fast as possible.