Sick bed fun (if such a thing is possible)
I’ve just spent the last four days in bed recovering from a rather nasty “virusy type thang”. Yesterday found me with enough strength to actually press the keys on my French-ified clavier and so I decided to cleanup the code to last weeks hastily cobbled together Link Preview experiment.
So whats new?
Sans aucun suprise, the “cleanup” actually involved a complete rewrite of the code base. I’ve managed to integrate keyboard activation (tabbing though the links will also activate the preview) and a nice “speech bubble” graphic ripped donated from websnapr (whose rather nice snapshot service the script now makes use of).
I’ve also integrated a forced 15 second timeout for the snapshot images to load (as the websnapr service could be temporarily unavailable for some reason or other).
Should the 15 second timeout occur, the loading indicator turns into an exclamation mark and the preview disappears two seconds later (ok, ok, I was ill and couldn’t think of another icon that could convey the message “This snapshot image just ain’t gonna load dude” within a 32 × 32 pixel area).
As usual, the script is unobtrusive. Just add the class websnapr to any external link you wish to display as a thumbnail preview.
Installation instructions
Change all image filepaths within the “websnapr.css” file to reference the correct filepath for your installation.
Change line 22 within the “websnapr.js” file to reference the directory in which you have stored the various speech bubble, loading and error images on your server.
// Line 22
baseURI: "./",
Add a reference to the “fdLinkPreview.js” and “websnapr.css” files within the head of your HTML document as is shown below (remember to change the filepath to suit your installation):
<style type="text/css" media="screen">@import "/the/path/to/websnapr.css";</style>
<script type="text/javascript" src="/the/path/to/websnapr.js"></script>
...and then give all links you wish to provide previews for the class websnapr.
Bugs & foibles
As Internet Explorer is the bane of my existence and won’t let me mix and match it’s proprietary opacity and AlphaImageLoader filters, the “fade in” effect has been removed altogether for this beast of a burden.
References
The following links were oh-so-helpful references or spin-off’s from the original script:
- websnapr
- Dustin Diaz
- Arc90
- napyfab
- A postNuke plug-in based on my original script by Frank Schummertz
Demo, downloads & updates
So, thats about all for now, check out the demo, download a 29k .zip of the files and remember to eat at least 5 different fruit and vegetables every day.
16/01/2007 (v1.3):
- Added functionality that enables the script to be used even when the page is rendered under quirksmode.
12/01/2007 (v1.2):
- Added functionality that enables you to use query strings within the websnapr links.
09/11/2006 (v1.1):
- Fixed an incorrect .jpg reference.
25/10/2006 (v1.0):
- Initial release.
Previous Comments ~
I can only see an ”!” in the demo page in firefox 2. :(
@ André: Hi André, the websnapr image server seems to have been down since yesterday (even the thumbnails on the websnapr site aren’t loading) so the img.onerror event is firing almost automatically which, in turn, makes the high-quality “exclamation mark” icon appear.
This goes to show that the onerror event handler on the image is working…
Things should be back to normal once websnapr starts serving images again.
Regards,
Brian.
Do you mean change line 22 of the WebSnapr.js file?
baseURI: ”./”,@ Hoboken411: Yep, it’s line 22 and not 27 as is stated above. Thanks for the info.
Regards,
Brian.
Thanks! I sort of have it working, but not quite. I guess I’m having issues with the directory naming conventions for the paths.
should I use a full URL (like the http:// etc?)
Or the /link/to/the/subdir? And is this from the WP root?
If I installed it in the plugins directory?
Such as:
/wp-content/plugins/websnapr?
Also, would it conflict with another previewbubble.js file? Can I have them both loaded in the header.php file?
I’m having issues getting it working.
Sorry for all the questions!
A couple other things…
1) I always get confused if I should use a trailing slash / after the directory, or is it not necessary?
2) you have a typo in your sample header code in spelling websnapr.css:
@import ”/the/path/to/websnpr.css”;
People copying and pasting may have issues and not realize it. :)
One last thing I’ve noticed. What is the thumbs.db file for? Because one bug I’ve picked up on is that your version of Websnapr is no longer differentiating between links with slightly different URL’s. It’s not taking them more than one sub-directory deep.
For instance:
http://hoboken411.com/archves/31
and
http://hoboken411.com/archives/256
both come up with the home page for http://hoboken411.com, not the blog post it was supposed to queue up as a thumbnail.
Anything I’m doing wrong?
Thanks!
Perry
Disregard my stupidity on the previous post about thumbs.db.. I totally forgot it’s the file windows puts in to thumbnail the images in a directory. BUT…
I’m still having the duplicate Thumbnail problems with your version of Websnapr.
Any ideas?
I change back to a different javascript file (for instance “Previewbubble”) and it properly brings up the correct blog post URL thumbnail.
I’d much rather use your awesome implementation… Thanks very much in advance!
@ Hoboken411:
Yes, if you are talking about changing line 22 of the JavaScript file.
Thanks, I’ve fixed it.
Thats a "feature" of the script (it shows a thumbnail for the base URI only). You will have to change line 138 from:
to:
should you wish to see unique thumbnails for the same URI.
Regards,
Brian.
Thanks for your quick attention and support! Making the web world better, one step at a time! :)
Another quick question… I’ve now changed line 138, but is it too late to have the thumbnails changed now that the WebSnapr server already assigned a thumbnail to that URI? I would suppose based on that line of code, the websnapr server will not change old ones, only new URI’s going forward?
@ Hoboken411: Hi, glad to be of help. The new line of code will produce a fuller URI e.g. www.msn.com/rubrique/ and not www.msn.com as before, so, if the websnapr service doesn’t itself trim the new query string back to be www.msn.com, the thumbnails it generates should be fresh. Also, make sure your actually loading the changed JavaScript file and not using the old cached version by forcing a reload in the browser.
Regards,
Brian.
hey, i’m using the script and it works wonderfully. however, how do i use the class to affect the CSS directly (eg. all links in the sidebar to be applied that class. but not all the links in the page). thanks!
Thanks for the post! Its working great, but I have a webpage with many links and would like to show preview once mouseover. Is there a way to do this?? Thanks
Thanks for the post! Its working great, but I have a webpage with many links and would like to show and process preview only when mouseover. Is there a way to do this?? Thanks
One quick question.. the bubble graphics show up fine on my home page, but the minute I get into the archives, I get no bubble. Just the thumbnail.
I have a little drain bamage right now. I’ve put the graphic files in multiple locations, yet they still don’t show up in /archives/ posts…
Thanks!
@ ace: Hi ace, it’s up to you to give the links the class “websnapr”, the script does not give the links this class. Just change your HTML and give only the links in your sidebar the class “websnapr”.
@ Bob: Hi Bob, just change lines 30 and 31 to be:
webSnapr.addEvent(lnks[i], [“mouseover”], webSnapr.initThumb);
webSnapr.addEvent(lnks[i], [“mouseout”], webSnapr.hideThumb);
This will make the image appear only onmouseover.
@ Hoboken411: Hi Hoboken411, I’ll have to have a look at the web page in question, send me the URL and I’ll see what I can do for you.
Regards,
Brian
I found the error by mistake. In the websnapr.js file there is a call for “loading.jpg” in the code. It should be changed to “loading.gif”..
I think that solves the problem.
Thanks for the reply. Your suggestion worked great! It seems your tool only returns the base url. Is there a way to return an thumbnail for a url other than the base url? When I edit the .js file to send the whole link (-http://). I get no image. Thanks for your time
@ Hoboken411: Thanks – thats a dumb error to have left in the code!
@ Bob: H Bob, read one of my previous comments for the solution.
Regards,
Brian
Brian,
I adopted your code and made a plugin for the PostNuke CMS out of it, full reference is given.
Download: http://noc.postnuke.com/frs/?group_id=8
Demo: http://support.pn-cms.de
Thanks for the code!
Frank
I’ve made a modification to the “websnapr.js” file for it to work with blogger.
Here’s the modified file:
http://pio.gentoo.tw/~palatis/websnapr/websnapr.tar.bz2
Demo:
http://palatis.blogspot.com/
thanks for the code :)
This is great, thanks!! Is there any way to get it to work in an IFRAME on the page (with the css & js on the main page)?
@ Landseer & Palatis: Nice work guys, it’s good to see the script in action on other peoples sites. Remember to fix the .jpg bug though!
@ MarkN: Hi MarkN, it’s certainly possible but it would require quite a rewrite. Sorry I can’t be more helpful.
Regards,
Brian.
Hi Brian
I just love this – many thanks. I have amended the code as advised to show detaill pages but the match is not quite working.
The construct that fails is like this: http://www.google.com/coop/cse?cx=002815104816423759882%3Alsmaf87o63i – can this be matched?
Thanks in advance.
Paul
@ Paul: Hi Paul, I’m afraid any URL that includes a query (the ?cx=0028151048… part) will have the query removed before being sent to the websnapr service. This is a necessary step as the call to the websnapr service itself requires a query i.e.
http://images.websnapr.com/?url=your_URL_goes_here
Sorry I can’t be more helpful.
Regards,
Brian.
Been using the plugin along with WebSnapr for a few weeks now, and is it just me, or has anyone else noticed an utter slowdown and almost complete failure of it generating thumbnails?
It’s frustrating to me. I haven’t changed any code at all, it just doesn’t want to act consistently anymore.
Any way to find out what’s happening?
@ Hoboken411: Hi Hoboken411, basically, the script does nothing but create an image and set it’s source attribute to the websnapr thumbnail service. If there’s a slowdown it most probably lies with overwhelming demand for the websnapr service which slows the thumbnail generation down immensely.
Also, if your network is slow, the 15 second timeout built into the script will fire and the dreaded “exclamation mark” will appear instead of the thumbnail in question.
Regards,
Brian.
First of all, just want to say that your link preview script here is awesome.
I have a werid question/problem using your script with my asp.net page thou.
Everything works perfectly, beside one thing.
I have an asp.net page with 4 links in it. I tag each link with class=websnapr. When I load the page, it seems to take very long to load. So I debug the page a little bit. And it seems like the page refreshs itself 4 times when it loads.
If I put 6 links on my page with the tag class=websnapr, the page will refresh 6 times before it stops.
I guess this is just the problem with asp.net page… I have tried to look at the javasript to figure out what happened, but I am not able to see what has gone wrong.
Just wondering if you will have any idea how to fix this kind of problem, or give me a direction on how to fix a problem like that? I am very new to javascript.
thank you very much
@ john: Hi john, as JavaScript is a client-side technology, it shouldn’t make any difference whether the HTML page is created using asp. I need more info in order to help you:
You say “refresh” – do you mean that the entire screen goes blank and then redraws 6 times?
What browser (and version) are you using?
Can you send me a link to the page in question?
Are you remembering to quote the class attribute (i.e. class=”websnapr” and not class=websnapr)?
Thanks in advance for the info,
Brian.
Thx a lot for replying so quickly.
After bunch of trial and error, I think i sort of solved the problem .
The problem may be related to the preloadImages function. I acutally couldn’t figure what went wrong with the function, but when I commented out that function call, the page will stop “refreshing”.
well… to be more specific, what i meant by “refresh” perhaps is more related to asp.net, I guess…
Whenever an asp.net page is loaded, the pageLoad event will fire, after I put your script to my asp.net page, the pageLoad event will fire … certrain amount of times, i guess depending on how many links that are taged with class=”websnapr”.
But the problem was that, lots of code will be excuted in the pageLoad event. I think the un-necessary “refresh” will cause some speed problem.
Anyway, haha
thx so much for replying so quickly, and lucky now the un-necessary “refresh” will stop after I commented out the preLoadimage funcion~
thx again for the greate script~
Hi, good work and thanks for the script. I am working on some modifications which i like to send you afterwards (can you send me your e-mail-adress?).
And i have a question: for what you use the parameter rndm?
@ john: Hi john, the preloadImages function just preloads the four “speechbubble” images used by the script. Perhaps it’s a cache setting in Internet Explorer?
@ Kelly: Hi Kelly, the parameter “rndm” is there to stop the thumbnails being cached by the browser (for websites that change on a regular basis, it’s better getting the latest version from the websnapr service than using the cached version).
Email me at brian [at] modernartcafe (d0t) net with the modifications.
Regards,
Brian.
Comments are currently closed for this article but feel free to email me with your input - I’d love to hear it.