1

I'm trying to display thumbnails of external webpages, similar to how Chrome shows recent favorites when a new tab is opened. I use an object element like this:

<object class="page-thumbnail" type="text/html" src="http://www.foo.com/endpoint.html">
   <p>page 1</p>
</object>

Is there a good jQuery/jQuery plugin or CSS example of how to accomplish this? I've looked at -webkit-transform, for example, but can't seem to get it to work.

Jeff Swensen
  • 3,513
  • 28
  • 52
Andrew B.
  • 1,010
  • 6
  • 19
  • I should mention that I don't have security issues for this use case, and there is no requirement to be cross-browser compatible. I've seen a solution using iframes (webkit-transform), but this doesn't seem to translate to object elements. – Andrew B. Feb 12 '11 at 03:02
  • Why in the world are you using an object element??? Otherwise, Duopixel's answer should work just fine. – Mark Eirich Feb 12 '11 at 03:30
  • ... to be strictly XHTML compliant. – Andrew B. Feb 15 '11 at 02:31

2 Answers2

3

It is possible to create something that looks like a thumbnail, the catch is that you can't control them via javascript. Also, it will only run on Firefox and Webkit.

http://jsfiddle.net/duopixel/vfTAN/

It's just a css scale transform applied on an iFrame.

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • That's the trick I'd seen for webkit tranform + iframe. Pasting my ... element in there it doesn't work. Any idea how to tweak it? – Andrew B. Feb 12 '11 at 03:30
  • Don't use object, it's MS propietary. In your code just replace – methodofaction Feb 12 '11 at 05:16
  • It looks like iframe is what I need. However, was introduced in HTML4 and is not MS proprietary, http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT – Andrew B. Feb 15 '11 at 02:31
  • IE9 also supports css 2D transformations now. So for your example, adding the rule "-ms-transform: scale(0.5, 0.5) translate(-50%, -50%); " will show a shrunken iframe. Reference: http://msdn.microsoft.com/en-us/ie/hh393506#_CSS3_2D_Transforms – Evan Jan 20 '12 at 19:23
-1

I don't think so, no.

There is no JavaScript access to HTML "thumbnails" in the first place, and secondly trying to get a thumbnail from an external URL would be a security problem.

You would have to create the thumbnails on server side to do this. There is no other way.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088