This script causes some odd effects in Safari.

When you hover over any link on a page containing the script, that link disappears, no matter if it was referenced with the link thumbnail class or not.

Is there any solution to this?

Posted on July 11, 2006 8:54 PM by Patrick Beeson

Very cool effect! I got so giddy I went ahead and added it over to my site! (let me know if there needs to be a credit somwhere so I can be sure to add it)

Just one question - does the site have to be a certain "age" in order to generate a preview? Originally, I tried it on all my links, and the internal ones all popped up to say "No Preview Available." I do have some broken links to unfinished pages at the moment, but there is a good chuck that do exist.

Any particular reason for this? Does it have anything to do with the fact that the reffering page is generated in Movable Type?

Posted on July 13, 2006 4:37 PM by jenn.suz.hoy

Patrick: We've just updated the script to work with Safari.

Jenn: We don't have control of the preview images so I don't know how long it takes for them to be updated. Links to pages on your own site won't appear either, since we made an assumption that it was only needed to show when the link points off site. One other helpful point is that the image is based on the root index page of a site, meaning that any sub pages will not have their own unique image.

Posted on July 13, 2006 5:00 PM by Joel Nagy

Ahhh, that makes sense, as once I was showing it around the office, people started asking "what's the point?" I could only respond by saying "Well, you'll know when you're leaving this site for another."

I did end up taking it off of all the links, as that just seemed like overkill anyway.

Posted on July 14, 2006 3:20 PM by jenn.suz.hoy

I'm not sure if anyone else has seen http://www.thumbshots.org but that would be a good open source for thumbnails. The main downside is they don't have thumbnails of every site out there. If you want you can see how they look by changing the following line in the js code:

m.src = 'http://thumbnails.alexa.com/image_server.cgi?size=small&url=http://'+ n;

changes to:

m.src = 'http://open.thumbshots.org/image.pxf?url=http://'+ n;

They do ask that you attribute them for the thumbnails.

Good work!

Posted on July 18, 2006 7:01 PM by Carson

Nice JS effect, seems to work like a charms on my blog... but the preview keep stayinf on top of my page, so if I "lift" down, I can't see the preview anymore...

any advice on how made the preview appears in the middle of the page ???

Thanks a lot ;)

Posted on July 19, 2006 3:19 AM by Charles Liebert

Doesn't seem to work. Oh yes it pops up a snapshot of the domain you are going to but NOT to the page you are going to. i.e. if the link is www.domain.com/sub-folder/page.htm it seems (at least for me) to display www.domain.com instead of www.domain.com/sub-folder/page.htm.

Puzzled.

Posted on July 19, 2006 6:03 AM by NB

Expanding on what Charles L. said...

In some browsers (i.e. Opera) it doesn't get the X,Y coordinates right. It seems to get Y correct but not X.

Posted on July 19, 2006 7:03 AM by NB

One more thing while I'm at it:

God forbid the URL wraps to a second line, The script has a spasm/seizure while your mouse pointer is hovering over the part of the link that is one the second line. Works fine one the first line, but not the second.

Seems like this script isn't quite ready for prime-time. :)

Posted on July 19, 2006 7:14 AM by NB

Its a cool script. i think to a nice clean site it can add that something extra to make people say cool. I wish that if there wasn't a preview for the site it would just show nothing instead of preview nto there.

but over all cool script and simple to set up

Posted on July 19, 2006 10:18 AM by Josh

Great script! I've been looking for it;)
Thanks alot

Posted on July 19, 2006 1:03 PM by sam

There appears to be a problem when using this script with layouts using columns that float and are positioned relatively. This script will not work with these types of layouts in Internet Explorer but work in Mozilla Firefox.

I like the way this script works although I too think it still too unstable for use on some websites.

Maybe another improvement would be to use transitional effects for showing these thumbnails to draw more attension to them.

Posted on July 19, 2006 2:00 PM by Web Design

Does anyone have a painless way of generating a big pile of your own thumbnail images of your own site?

I want to supply this effect to links within my site.

Posted on July 19, 2006 5:22 PM by Dan Hunt

I would like to reference my own images. Not images on my site, but images from an image file or server so that each link could reference a specific image. I think this script would have killer application using it in textlink ads.

Posted on July 19, 2006 8:08 PM by andthensum

andthensum, here's my guess:

You'd have to write code that returns images from your server based on an ID requested as GET (am I saying that correctly?)

Then, change:

m.src = 'http://thumbnails.alexa.com/image_server.cgi?size=small&url=http://'+ n;

to:

m.src = 'http://www.yourdomain.com/thumnails/serve.php?thumb_id='+ n;

Make sure your image serving script outputs an image mime-type. The script should query a database table for an image with a matching id, and return the image.

Somebody fix me if I'm dead wrong on this...

Posted on July 20, 2006 2:52 AM by Colin

Is there a way to change the no screenshot image? I would like to replace that with my own, It just looks horrible in my current design. :)

Posted on July 20, 2006 4:08 AM by DENiAL

As it's designed currently it can only use images from the referenced system, but like all our tools they are licensed under the Creative Commons Attribution 2.5, which means (as long as you attribute the derivative to Arc90) anyone can modify the script to work differently.

I can suggest that an additional class be added to each link that indicates the image is local and with a simple if/else grabs the local image created yourself. If anyone does make an addition to the code, please let us know we always want to see what people can do with the tools we provide.

Posted on July 20, 2006 9:57 AM by Joel Nagy

This is a great idea for a script, but the script doesn't work. In Firefox it ruins the background color of my tables while displaying the preview image correctly. In Explorer, it displays the images in the upper left hand corner of the browser, even if the link is all the way below the fold of the page.

Posted on July 20, 2006 2:11 PM by Volkan

Volkan and others that notice really odd behaviour, please send me a link to where you have tried to use the code and I'll see if I can duplicate the problem and fix it. We tried to make the script run in all browsers, but sometimes the CSS of an idividual site totally confuses things.

Also I'd like to let everyone know that it seems like the thumbnails update rather quickly for those that are not available when you first try. Only took a day or two for a few links I tested to now have previews.

Posted on July 20, 2006 4:00 PM by Joel Nagy

Joel, thanks...if that functionality can be added that would be perfect.

Posted on July 20, 2006 6:42 PM by andthensum

This can now be achieved without the need for Javascript.

Take a look over at CSS Play for an all CSS solution:

http://cssplay.co.uk/menu/pop_ups.html

Posted on July 21, 2006 9:35 AM by Chris Williams

Thanks for the feedback Chris. The issue comes in with Safari.

Posted on July 21, 2006 4:24 PM by Alex

Hi, I think this very cool tool for Web Design. Thx for do it.

I use it for create a Wordpress Plugin.
http://www.anieto2k.com/2006/07/18/linkthumb-plugin-crea-miniaturas-de-la-direccion-de-tus-enlaces/

More easy for Wordpress users.

Thx.

Posted on July 22, 2006 7:42 AM by aNieto2k

I agree on the point, that it’s better to implement this effect purely based on CSS. But the plugin (previous post) is a great effort.

Posted on July 23, 2006 1:27 PM by Drukwerk

While the CSS effect is a good effort it doesn't work in Safari, which is half the need of the JavaScript. And for the non programmer that blogs they have add more code by hand for every link instead of a simple class.

Posted on July 24, 2006 10:39 AM by Joel Nagy

It's great to have in my hands two ways to achieve the same effect.
What's the best one? This doesn't matter.
The point is that I've two clear,valid and smart ways to go with.
I'll do my choice, depends upon my audience.
This is a great tool. Thans for share.
I'm a CSS evangelist and translated the tool to brazilian portuguese.
Translation is hosted at:
http://www.maujor.com/blog/2006/07/23/link-thumbnail/
and my readers love the tool.

Posted on July 24, 2006 4:26 PM by Mauricio Samy Silva

Very cool indeed - could have been my idea ;) Great work!

Posted on July 25, 2006 2:32 PM by Mario Heiderich

If you see "No Preview Available." Try this.

Change:
m.src = 'http://msnsearch.srv.girafa.com/srv/i?s=MSNSEARCH&r='+ n;

To:
m.src = 'http://webdesignbook.net/snapper.php?url='+ n + '&w=160&h=120';

You can see this at:
http://miguel_ps.blogspot.com/2006/08/miniaturas-para-tus-enlaces-iii.html

Posted on August 2, 2006 11:14 AM by Miguel Pérez

Hi all,
A few days ago I wrote a blog post (hosted on Typepad) about Link Thumbnail (here: http://www.cleverclogs.org/2006/08/pull_quote_myst.html) and of course uploaded the script to demonstrate it to my readers.

Link Thumbnail seems to work fine for any post that appears on the main url http://www.cleverclogs.org, but as soon as I access posts through their individual permalinks, Link Thumbnail just doesn't seem to display any images. The piece of Javascript is stored on the Typepad server in a folder at http://dutchisms.typepad.com/cleverclogs/arc90.

I'm puzzled why the script wouldn't work from the blog posts. The same behavior occurs both in Firefox and in Internet Explorer. If I look at the source code of any individual post, I clearly see the piece of Javascript being included, it's just not being executed properly for some reason. Any clue where I might have gone wrong or how I could debug this?

Any help greatly appreciated.

Posted on August 8, 2006 10:54 AM by Marjolein Hoekstra

Marjolein -

Joel Nagy, the lead developer of Link Thumbnail, has made some modifications to the code that may fix your problem.

You can download the new version over in the lab.

Posted on August 8, 2006 2:15 PM by Chris LoSacco

Thanks so much. Code is working perfectly now.

BTW, I'm not incredibly happy with my email address showing up on your pages. Could you remove it? I thought you needed it to get back to me by email. I didn't expect it to show up on your site. I notice I can't submit a comment without an email address...

Anyway, best of luck with your Lab projects and thanks for responding so quickly!

Marjolein

Posted on August 8, 2006 4:59 PM by Marjolein Hoekstra

Marjolein -

I've removed your email address, so you can't blame your spam on us. :)

Thanks for your interest in our tools, and I'm glad we were able to get everything working on your site.

Posted on August 8, 2006 5:02 PM by Chris LoSacco

Hi,

I've received many requests from people asking how I managed to get link thumbnails working on my pages.

I have a few questions that have come up while discussing the usability of Link Thumbnail with other bloggers:

1. Could a blogger give control to the reader whether or not the thumbnail display is enabled? I'm thinking of requiring the Ctrl key to be pressed in order to view the thumbnail. After all, we ARE heavily influencing the user experience here. Putting it differently: if a reader dislikes the thumbnails, is there any way he/she could opt out from seeing them?

2. Isn't it true that Link Thumbnail is only useful outside the own domain? What about a tiny tweak to make Link Thumbnail active for outgoing hyperlinks only?

Looking forward to your reactions.

Posted on August 14, 2006 8:04 AM by Marjolein Hoekstra

Marjolein -

Your suggestion about a hotkey for controlling/toggling display of the thumbs is an intriguing one. However, that implies that the typical browser would somehow "know" the key combo - unlikely. More likely is that the publisher of the site publishes the combo, and now the user has to learn something new. Instead, the publisher could perhaps provide a button to control these functions.

You are correct that Link Thumb really only make sense for outgoing links, and I believe this was the original aim of the tool. We'll review the script and patch if necessary!

Posted on August 21, 2006 3:40 PM by Chris LoSacco

Hi there,

Great script, thanks for sharing.

One question :-)

Is it at all possible to use this sript when hovering over an image link instead of a text link?

Regards,

Kees van Dongen

Posted on August 29, 2006 5:35 PM by Kees van Dongen

Kees -

The script modifies anchor tags, so it will work on image links as well.

Posted on August 30, 2006 12:21 PM by Chris LoSacco

I love this script, and I'm using it in my links section. So, whenever a viewer mouseovers a link to an external site, it will show the thumbnail. However, I use both text and image links. The text links work fine, but I get errors when using images.

Any help is appreciated!
http://www.ionburn.com/foobar.php?id=links

Posted on September 8, 2006 4:22 PM by Jay

Jay -

The image problem looks like an IE quirk, but since you have a number of different scripts working on your page, we can't really debug the problem. One solution would be to add additional text with the image to display the thumb.

Hope this helps.

Posted on September 11, 2006 1:06 PM by Chris LoSacco

Very cool idea, and excellent implementation, cant wait to play around with it!!

Posted on October 13, 2006 12:04 PM by Lars Koudal

Hi,

I have tried for a few days to make the Link thumbnail to work on my site. But I'm having some problems. If someone can look at the source code at this URL http://floridaonthefly.info/Beginners.htm and let me know what I'm doing wrong it would be very much appreciated. Thanks

Posted on November 18, 2006 12:17 PM by Ken Van Every

Ken -

You need to put the two arc90 lines (the ones that start with <script> and <style>) before the end of the head section - that is, before the </head> tag.

Sorry for the late response!

Posted on November 27, 2006 8:42 AM by Chris LoSacco

very nice. works great, is it possible to show an "loading" image while the page loads. on my line it takes up to 4sec untill i get the website image.

Posted on November 27, 2006 3:07 PM by macosbrain

hello,good script.

Now if I want to display the url'title under the thumbnail,How to do it?

thank you!

Posted on December 12, 2006 9:17 PM by carlos

Carlos -

This would require modifications to the JS - you are more than welcome to dive in and extend the tool if you feel so inclined!

Posted on December 13, 2006 10:53 AM by Chris LoSacco

hello, I try to use your script but always for all link show me "thumbnail has been queued" ????

Posted on December 15, 2006 1:28 AM by andrea

Andrea -

This means the service will have a thumbnail soon - check your page again in a few hours.

Posted on December 15, 2006 9:24 AM by Chris LoSacco

ok...tenks for help and nice script...

Posted on December 16, 2006 12:39 AM by andrea

Hi,

At first what a nice script! I've downloaded your example zip file en changed some links. But every link shows the thumbnail off google. Could anybody tell what I'm doing wrong?

Thanks!

Posted on January 22, 2007 4:31 AM by Arno

This one is even better!

http://www.snap.com/

And all you need to do is register, they give you an URL and voila, it works!

Your version is cool too, BTW ;-)

PS: Would be nice if you marked the mandatory fields in the form BEFORE one clicks the 'Post Comment' button (I have JS turned off)!

Posted on January 22, 2007 8:30 AM by Sebastiaan

Arno -

Our fault; there was an error in our script. We've updated it, so please download the latest version (2.0.1) and you should be good to go.

Sebastiaan -

Snap's offering is definitely nice, but we don't require registration, and ours is a bit more lightweight in presentation. But thanks for presenting the option.

Posted on January 22, 2007 9:36 AM by Chris LoSacco

If you need another thumbnail service, you might wish to check out www.artviper.com/tools.php ( german: www.artviper.net/tools.php ).

The service lets you adjust various options:
-whole page snap or just an area
-output size
-delay time
-quality level
-timeout
-force refresh of thumbnails

Cheers
Frank

Posted on January 28, 2007 12:55 PM by Frank

Opening a page in MSIE7 shows an "eye", a circle/slash "no go" and "Privacy Report" which when opened says:
http://mypage.com.au/~username/to/javascript/arc90_linkthumb.js" is blocked. I've checked MSIE settings but can't find the culprit. Also, what about other recipients of my link?

TIA

Peter

Posted on February 18, 2007 7:04 AM by Peter

Peter -

Sounds like a local browser setting; double check your configuration, and see if you can test your site on another machine.

Posted on February 19, 2007 12:04 PM by Chris LoSacco

it seems not to work with ajax generated content :(

it's a pity! i like it anyway!

Posted on March 1, 2007 11:27 AM by lekin

Lekin -

Not sure what the problem is with Ajax content. If you remember to escape the characters in the XML, it seems to me that it should work.

Anyway, if you have a specific problem, let us know and we'll check it out.

Posted on March 1, 2007 11:30 AM by Chris LoSacco

I've coded your javascript for the CMS called Joomla!.
http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,2331/Itemid,35/
thank you very much for your job !

Posted on May 19, 2007 7:42 AM by Nicolas

Is there a way to increase the thumbnail image size? I have edited the styles but all that seems to do is stretch the image.

Posted on August 18, 2007 11:26 AM by Tony

Tony -

Where the thumb source is defined in the JavaScript, the latter two params are the dimensions of the image. For the default, Websnapr, you can change them to the sizes provided by the service, which are defined on its web site.

Hope this helps, and thanks for your interest.

Posted on August 20, 2007 8:49 AM by Chris LoSacco

I love the script, however it works perfect on my localhost, but when I upload it to the server, it no longer works, if I save the page as file, and open it up, the script works, any ideas on why something like this would happen?

Posted on November 25, 2007 7:39 PM by Jeff

Sounds like a path problem to me, Jeff. Can you confirm that (a) you've uploaded the JS file to your server, and (b) you're pointing to the remote location in your file?

It's best to use relative paths -- e.g. js/myscript.js -- as then it will work both locally and remote.

Hope this helps.

Posted on November 26, 2007 12:57 AM by Chris LoSacco

I was curious to know if this can be used on an image rather than text. If so, what do I need to do to make it happen?

Anything helps,

Thanks

Posted on February 7, 2008 4:36 PM by Angelo

Hi!

Why doesn´t the thumbnail show the video in the links?

Try to use this with a link that directs to a YouTube video and you will notice it won´t preview the video...

My idea was to use this to make thumbnails of videos from external pages, but that doesn´t seem to work.

Is there any possible solution?

Posted on February 29, 2008 6:03 PM by DUc Van Nguyen

awesome scripting my man :) is there anyway to change the size of the popup please, my main goal of using this script was to let people know the server status of a game my clan plays but its a tad too small to see, any help would be appreciated:) thanks in advance :)

Posted on March 5, 2008 2:26 PM by John

and by the way it works fine on image type links all of mine work fine just a tad too small to see clearly :)

Posted on March 5, 2008 2:47 PM by John

I found this very useful. Thanks

Posted on April 22, 2008 8:29 AM by Upickreviews

This works very and is a big improvement over the excessive SNAP thumbs which look quite ridiculous.
My question is: I have set this to show all external hyperlinks on my site which works well, but I have internal (photo) links, that open in a new window, and I want it to ignore those. Since I have more externals and only a few photo ones, how do make it ignore the photo links, but display the external site links?
Casey

Posted on June 23, 2008 10:12 AM by Casey

I want to ask something related to this.. instead of websnapper I want to show the snippet (word description) of that link. any idea?

Posted on August 20, 2008 11:20 PM by joe

I had some problems with the shadow not appearing until I used the same doctype as in the example.html file. When I did that the shadow worked fine. It was a bit frustrating until I discovered that!

Great script, I love it and I love hosting a live solution like this rather than creating and managing thumbnails.

Thanks!

Posted on August 26, 2008 1:56 PM by Helen Bradley