ansaurus

Question

jQuery Webpage Preview

Answer 1

+1 A:

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

This should suffice. = )

Fulvio 2010-07-02 01:58:52

+1, I like it. Let me play with it and get back to you

griegs 2010-07-02 02:01:15

Those thumbnails appear to be static screenshots. Just hover over MySpace and then look at the real page by clicking the link.

Gert G 2010-07-02 02:25:18

@Gert G, it's using snapr <?> and that queues the page and serves it later on. unsure this is dynamic enough

griegs 2010-07-02 02:27:48

Won't work on an Intranet. ;)

Gert G 2010-07-02 02:38:13

Answer 2

+3 A:

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.google.ca"&gt;
</iframe>
</body>
</html>

Have fun :)

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

data:text/html,<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.google.ca"&gt;&lt;/iframe&gt;&lt;/body&gt;&lt;/html&gt;

crazy2be 2010-07-02 02:28:38

+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 2010-07-02 02:59:44

+1 and for the ability to still click buttons. :) this might be the way to go i think but need to play first

griegs 2010-07-02 03:11:50

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 2010-07-02 06:14:36

Answer 3

A:

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

Gert G 2010-07-02 02:54:10

ansaurus

tags:

views:

answers:

jQuery Webpage Preview

related questions