25

Does anyone know of a plugin that allows you to roll over an anchor link and see a preview of the webpage?

So essentially we may have a link on the page to say www.mysite.com and when you roll over the link I'd like to see a preview of the site.

I know there are plugins out there that show you an image file but I'm looking for something that will preview the live page.

Edit

I'd like to see a thumbnail of the page.

griegs
  • 22,624
  • 33
  • 128
  • 205

3 Answers3

61

If you actually want a preview of the live page, you'll have to use an iframe. If you just want an image preview, Fulvio's suggestion will work, but won't show a "live" preview (i.e., no animations that you would normally see, if the user is logged in to a page, you will only see the front page, etc). It is possible to actually scale the contents of an iframe so that it's a thumbnail, thus achieving the effect you want. For example:

<html>
<head>
<!--[if IE]>
<style>
#frame {
    zoom: 0.2;
}
</style>
<![endif]-->
<style>
#frame {
    width: 800px;
    height: 520px;
    border: none;
    -moz-transform: scale(0.2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.2);
    -webkit-transform-origin: 0 0;
}
</style>
</head>
<body>
<iframe id="frame" src="http://www.bing.com">
</iframe>
</body>
</html>

Have fun :)

Copy and paste into your browser's URL bar to preview:

data:text/html,<html><head><!--[if IE]><style>iframe{zoom:0.2;}</style><![endif]--><style>iframe{width:800px;height:520px;border:none;-moz-transform:scale(0.2);-moz-transform-origin:0 0;-o-transform:scale(0.2);-o-transform-origin:0 0;-webkit-transform:scale(0.2);-webkit-transform-origin:0 0;}</style></head><body><iframe src="http://www.bing.com"></iframe></body></html>
crazy2be
  • 2,134
  • 1
  • 21
  • 17
  • 4
    +1 not only because it's a good answer, but also for the novelty of being able to search for "hello world" in a scaled down version of Google. – icktoofay Jul 02 '10 at 02:59
  • +1 and for the ability to still click buttons. :) this might be the way to go i think but need to play first – griegs Jul 02 '10 at 03:11
  • It will be slower than an image-based preview 90% of the time, since it has to load an entire webpage. Depending on your uses, you might want to load a thumbnail from any of the available services(such as the one used by qtip), and then fade it to the iframe once it's finished loading. What are you planning on using this for, anyway? – crazy2be Jul 02 '10 at 06:14
  • 12
    and +1 for the data:HTML in the URL bar... never seen that before ! sweet ! – tsimbalar Feb 10 '11 at 21:11
  • the data:HTML-preview doesnt work for me in Chrome – xorinzor Aug 29 '12 at 13:40
  • 1
    Google recently changed their http headers to add a x-frame-headers: sameorigin header, preventing this solution from working. I'll update the example to use bing instead. – crazy2be Aug 29 '12 at 18:06
  • Shouldn't the `<[endif]-->` portion be `<![endif]-->` ? – Curtis Feb 01 '13 at 21:58
  • @Curtis: Hmmm, I swear than works, but I don't have an IE around to test, and the internet says you're right :P. I'm updating the answer now. – crazy2be Feb 02 '13 at 04:46
4

qTip is a tooltip plugin for the jQuery framework. It's cross-browser, customizable and packed full of features.

http://craigsworks.com/projects/qtip/demos/content/thumbnail

UPDATE:

qTip 1.0 will soon be obsolete... check-out the qTip2 preview.

gotnull
  • 26,454
  • 22
  • 137
  • 203
0

More thumbnail services at Free Website Thumbnail Services. But they might still cache images, just like WebSnapr.

Gert Grenander
  • 16,866
  • 6
  • 40
  • 43