Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create url preview in JavaScript?

Can someone help me with creation of a url previews in JavaScript?

What I mean is this: Say I have a link on my site, I want the user to be able to mouse over the link, and have an image pop up that shows what the target of the link looks like.

Don't worry about the css, I got that working, I just need the actual script to show the image.

Currently I am doing it by showing up an iframe that actually renders the page, but this is not scalable and looks ugly.

Having the page display premade images is not an option, since the links will be linking to dynamically generated user content.

like image 705
Razor Storm Avatar asked Apr 26 '10 18:04

Razor Storm


People also ask

How do I make an image a link in Preview?

In the SEO settings, you can upload individual preview images for each of your website pages. In the page SEO settings, open the Social image tab, click Add image or Replace image and upload your file: The recommended preview image size is 1200×630 PX. Once you add the image, save the changes and update your website.

Can I preview a link before clicking on it?

If you aren't so sure about where a link will direct to, it is possible to preview the link before clicking on it. To do this, simply add a + sign to the end of any link in your browser.

What is a Web link preview?

Link previews summarize the content at the link destination with a title, description, and thumbnail. Previews are generated automatically, and each social network generates them differently. If you don't want to see link previews, you can add an image instead.


1 Answers

You need to have pre-stored images. Javascript cannot take screenshots and resize the images (for now). Try this: http://snapcasa.com/ . It takes images dynamically for you. All you have to do is to hot link the images :)

The best features when using http://snapcasa.com/:

  1. Images are guaranteed to be most up-to-date

  2. You don't have to store them on your server!

  3. Free plan has lots of credits for you to burn!

like image 51
Viet Avatar answered Oct 21 '22 12:10

Viet