jQuery Webpage Preview [duplicate]

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.

Solution 1:

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>

Solution 2:

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.

jQuery Webpage Preview [duplicate]

Solution 1:

Solution 2:

Related

Recent Posts