FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

How to show a webpage preview/thumbnail a la ask.com?

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Traveller
The search results from ask.com contain a binoculars icon next to most links. When one positions the mouse pointer over that link's binoculars, a floating window appears that shows a preview that is a thumbnail of the webpage to which the link points.

After plodding through the search engines and the usual scripts and "goodies" sites for most of the day, I'm giving up and asking here: How is this done?

I have tried creating an iframe pointing to a webpage, but can't find any way to scale the contents so that the whole page will be visible without scrollbars. Simply turning off the scrollbars only removes them, leaving just a portion of the page within the iframe. I don't know if this is done exclusively with javascript/CSS, or if there is some special PHP class, but the source code from the ask.com results is not exactly helpful.

Simply stated, I would like to have a link page that shows the link's name, URL, description, AND a preview.

Any ideas?
Thanks!
LukeakaDanish
I am 99% percent sure that doing this automatically is imposible. - atleast HTML, CSS and Javascript wont get you anywhere near. Perhaps there is some very obscure way to load an entire page onto an image canvas with php, however loadtimes for your pages would be SO high that it would serve no purpose.

The way ask.com do it (i presume) is by taking a screenshot (Print screen) of the page that is linked to, resize it using a thumbnail generator and showing it using some simple javascript

Try browsing around ask.com and find out if their link previews are always 100% up-to-date. If they arent then they probably use "my" method, otherwise they are very clever with php Shocked Very Happy

MINDWAVE: If the thumbnails are created at timed intervals by php (as a "cronjob"), loadtimes wouldnt suffer, and they would appear to be 100% up-to-date - perhaps this is what they do
Traveller
Probably right, Luke, but after a LOT more searching, I found some interesting options that may be useful to anyone else interested:

First, here's a site that does what you said, keeps a database of the images, then allows people to use the images as long as they give credit:

http://www.thumbshots.org/

Although that is interesting, it does not (of course) contain all sites, and cannot generate a thumbshot on the fly.

That brings us to an INCREDIBLE find: a site that does generate the preview on the fly, and is amazingly easy to use. It's called "simpleAPI" (http://img.simpleapi.net/). Unfortunately, the site is in Japanese, so I couldn't find any documentation, but I did find a blog entry (on another site: http://michael.wilcox.net/2006/04/20/how-to-get-thumbnails-of-webpages-on-your-blog-automatically/) from which I was able to figure out that the way to use the input form on the simpleAPI website is simply to enter the URL of the site for which you want a screenshot, then it returns back a URL for the image, plus complete code for using the image as a link!

With a little experimentation, I also discovered that it is not even necessary to use their web page: all that was needed was to put the desired URL after
Code:
http://img.simpleapi.net/small/
within an IMG tag.

Here is an example - a thumbnail of the FriHost home page. The URL is
Code:
http://img.simpleapi.net/small/http://www.frihost.com
and that produces the following image:

(Unfortunately, the FriHost forum would not properly handle that URL, so you're actually seeing the image as I saved it.)

One additional note: the blog entry that I mentioned before said that it appears there is a limit of five such thumbnails per page. I have not put this to the test yet, nor tried using multiple, maxed-out pages within the same site, but it is still an exciting find!
LukeakaDanish
That is very interesting!

have you experimented to find out whether the load speed of your page has incresed?

Rememebr that in order for the thumbnail page to be created the thumbnail page would have to download the page first - if you included like 10 pages or something that could take some time Question
Traveller
LukeakaDanish wrote:
have you experimented to find out whether the load speed of your page has incresed?


Not yet. Whether or not I could find something like this, in the first place, was part of my decision of how to set up the page. Because of some other chores, however, I won't return to that page until later tonight or tomorrow.

LukeakaDanish wrote:
Rememebr that in order for the thumbnail page to be created the thumbnail page would have to download the page first - if you included like 10 pages or something that could take some time Question

Of course. Maybe that's another reason simpleAPI only allows five per page (if that is the case - I haven't tested that yet, either). Either way, it's still a great service.
venc
whats the code to do the binacular thing like ask.com though????
Traveller
venc wrote:
whats the code to do the binacular thing like ask.com though????

Well, the "binocular thing" is just an image that is told to display on mouseover. Getting the image was what my question had been, and what I said about http://img.simpleapi.net/ pretty much answers what I had sought. As LukeakaDanish mentioned, however, the images used for the "binocular thing" on ask.com are not generated dynamically, but periodically, then just called up when needed. Beyond that, I have done no further research, since http://img.simpleapi.net/ does exactly what I wish to do.
venc
ok...? but, do you know the code to do that? I spent a while scanning through ask.coms code, but couldnt find it
LukeakaDanish
go to http://lukedk.frih.net/temp/quickhover

This is a very simple example of how to do javascript hovers. (view the source)

To get the images, take a screenshot and resize it using Photoshop / GIMP
venc
thanks a ton luke, but, can you show me a working example? because I cant get it to work for me
LukeakaDanish
venc wrote:
thanks a ton luke, but, can you show me a working example? because I cant get it to work for me


That is a working example! (of how to do a javascript hover)

If you want something more specific here is some quick code to get you started:

Code:


<!--First here is the code for the thumbnail...note how i positioned it ontop of everything else using position: absolute; (change the # to your positions), and made it invisible using visibility: hidden. Also note the id and the xhtml compliant closing slash :D.-->

<img src="thumbnail.png" style="position: absolute; top: #px; left: #px; visibility: hidden;" id="thumbnail1" />

<!--Here is the link...note the javascript event handlers and how they change the visibility of the thumbnail-->

<a href="gosomewhere.html" onmouseover="document.getElementById('thumbnail1').style.visibility = 'visible';" onmouseout="document.getElementById('thumbnail1').style.visibility = 'hidden';">SOME TEXT OR IMAGE</a>



Hope this helps you...if it doesnt please ask me over PM
venc
thanks, I will go check it out now
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.