Menu
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.
415
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>
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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
