Thumbnail when hovering imagelinks

Thumbnail when hovering imagelinks

Maybe theres something similiar out there (always seem to be when I make a userjs).

But here it is anyway. When you hover a image link youll see a thumbnail in bottom left corner.
It's not bug-tested at all so please say if you find any bugs.

http://sima.ax.loopiadns.com/Other/imgthumb.js

Might have to restart opera after putting it in userJS folder.

Thank You!
EDIT:
Large images + "Fit to Width"
widewidewidewide.png

Updated the link in main post to version 1.1, fixed the fit-to-width bug and added a very handy feature:
Like before, a thumbnail is shown when you hover an image link. But now you can show the image in it's original size by pressing and holding down ctrl while the thumbnail is shown.

Thanks..

It's very useful

Many thanks man, very useful. . Without any problem

Nice to see you like it

this is great thing. one of the best i have ever used.

Thanks

Thanks but "Download All with oGet" script does not work with imgthumb.js. Is there any solution?

"Download All with oGet"

[Document Popup Menu]
.
.
.
Platform Windows, Item, "Download All with oGet"="Go to Page, "javascript:(function(){var encodeBase64=function(a){var b='';var c=0;var i=0;var d='';var e=a.length;var f=[];var g='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';while(c=a.charCodeAt(i++)){if(c<0x80){f[f.length]=c}else if(c<0x800){f[f.length]=0xc0|(c>>6);f[f.length]=0x80|(c&0x3f)}else if(c<0x10000){f[f.length]=0xe0|(c>>12);f[f.length]=0x80|((c>>6)&0x3f);f[f.length]=0x80|(c&0x3f)}else{f[f.length]=0xf0|(c>>18);f[f.length]=0x80|((c>>12)&0x3f);f[f.length]=0x80|((c>>6)&0x3f);f[f.length]=0x80|(c&0x3f)}if(i==e){while(f.length%%3){f[f.length]=0;d+='='}}if(f.length>2){b+=g[f[0]>>2];b+=g[((f.shift()&3)<<4)|(f[0]>>4)];b+=g[((f.shift()&0xf)<<2)|(f[0]>>6)];b+=g[f.shift()&0x3f]}}return(b+d)};var topLevelDN=function(domain){if(!domain)return;if(/^(?:\d{1,3}\.){3}\d{1,3}$/.test(domain))return domain;var a=domain.split('.');var l=a.length;return(l<3)?domain:(a[l-2]+'.'+a[l-1])};var links='';var n=0;var rn='\r\n';var downloadAll=function(w){if(w)with(w)try{var l=document.links;var h=topLevelDN(location.hostname);var c=document.cookie;for(var i=0,li;li=l[i];i++){if(li.protocol!='javascript:'&&li.protocol!='mailto:'){links+=li.href+rn+li.innerText.replace(/\s/g,' ').replace(/^\s+|\s+$/,'')+rn+((c&&h==topLevelDN(li.hostname))?c+'; ':'')+rn+rn;n++}};for(var j=0,f;f=frames[j];j++){downloadAll(f)}}catch(e){}};downloadAll(window.top);location.href='data:text/ogt;charset=UTF-8;base64,'+encodeBase64(n+';My_Download_Manager;2;;'+rn+location.href+rn+links)})()",,,"Save" "

Do you mean you can't download the file or that running the imgthumb userJS breaks oGet?

I meant imgthumb userJS breaks "Download All ..." menu function of oGet.

That's very weird, it don't change the links in any way so it shouldn't break cause of that. Are you using extra-download-links.js as well?

Yes, I'm using it.

Okay, I'll look into it when I have time, very busy with work and some other stuff atm.

This is really nice.Thanks Kani.

Kani
Good idea, but worst code which I saw. I think it contains most possible errors.

offcu

but "Download All with oGet" script does not work with imgthumb.js.

Replace

links = document.getElementsByTagName("a");

in imgthumb.js
on «var links = document.getElementsByTagName("a");»

Kani
http://dev.opera.com/articles/view/efficient-javascript/

Error №1 Avoid a global variables and functions. Use anonymous function.
Error №2 Don't use .onsomething. It may break exists handlers on pages.
Error №3 Not forget about «var» in functions.
Error №4 Cache DOM values in script variables. Five «document.getElementById('thumbBoxDiv')» - bad idea.

And it contains many useless code

function onReady()
{
createBox();

var links = document.getElementsByTagName("a");

for(var i = 0; i <= links.length; i++)
{
if(links[i] != 'undefined' && links[i] != 'null' && links[i] != null)
{
if(links[i].href.toLowerCase().match("jpg$") || links[i].href.toLowerCase().match("png$") || links[i].href.toLowerCase().match("gif$"))
{
links[i].onmouseover = "showThumb('" + links[i].href + "');";
links[i].onmouseout = hideThumb;
}
}
}
}

it can be written twice shorter:

function onReady()
{
createBox();

var links = document.getElementsByTagName('a');
for(var i=0, li; li=links[i]; i++)
{
if(li.href && li.href.match(/\.(jpe?g|bmp|gif|png)$/i))
{
li.onmouseover = "showThumb('" + li.href + "');";
li.onmouseout = hideThumb;
}
}
}

Thanks for the input lex1, javascript really isn't my strongest side. Too much stuff that don't really make sense to me in it.
ATM I have too much stuff going on to work on this, but if anyone wanna rewrite/change it feel free to do so.

Thanks. This works great:)

It gave me a new idea for a js. It would be useful to have something like this for Google Image Search and facebook. When I hover an image thumbnail that link to the full size image, i will see the image the same way as this js display it, only in full size.

Just imagine to search for a image and you can just hover it to display the full size image. The same goes foe facebook, when i am looking for my friends and their updates.

Downloading for trying. Thanks!

This is a awesome JS Thanks for making it Jonas!

useful. thanks alot.

You should check that when using this script your acid3 test results will drop to 97/100, at least it happened to me using it with Blockit, Linkalert and Snap-Links, BUT removing any/all of those other JS didn't make a difference on the result so it is a problem with imgthumb.js

Hey, just came back and saw all the positive support here I have a lot more javascript experience now so I might rewrite this and make it work better along with other scripts.

If you have any requests for additional functionality just tell me

Very usefull, thanks.

Thanks! it's very useful.

Originally posted by Kani:

If you have any requests for additional functionality just tell me

is it possible to adjust the size of the image? i'd be fantastic if when i put the mouse on the thumb i can resize it.

will be awsome if we can use this script with extra download links script... that way we will be able to have a preview of the image in link panel.

I found errors:

Error 01
Error 02

On these screenshots all normal:

Normal 01
Normal 02

I am too ignorant to properly download this. Went to preferences, put in folder title as suggested, right-clicked on the link,saved it (went to My Pictures) and nothing happens. I imagine I did about 6 things wrong. Can you make it even simpler than you already did?
Thanks.

If you have Opera 10.1 you can install this Unite application, it can install scripts for you.

@Kani, it's a wonderful script but is there anything that can be done to makeit compatible with Arve's autosizer script?