inYOf4ceBook

By znerp Last update Nov 9, 2010 — Installed 135,447 times.

"Floating Images On Mouseover??"

in
Subscribe to "Floating Images On Mouseover??" 5 posts, 3 voices



Dink Scriptwright

I have seen a couple facebook image scripts that have a "floating" effect when you hover the mouse over a thumbnail. I like that effect alot, but this script is the only one that enlarges the wall photos also. So in trying to keep the ability of enlarging wall photos I was hoping there is a simple code change that I can do to add the "floating image" effect. I have tried all I know, so if you could help that would be awesome!! Here is the url's of those scripts that have that effect. Thanks!!

http://userscripts.org/scripts/show/12433

http://userscripts.org/scripts/show/11446

 
znerp Script's Author

I'm not very happy with the code for this script at the moment. I've always subscribed to the philosophy that if you have to write the same/similar code more than twice then you're doing something wrong. At present, I have 3 blocks of similar code in this script, so you'd have to change them all. At some point I'll look at re-writing it to make it better, but it works as it is and I wanted to get a fix out quickly after the last Facebook change so that's why it is as it is.

This is completely untested and written on the fly, so you might need to tweak it. To do what you want you'll need to find everywhere I've put newDiv.getElementsByTagName("img")[0].src = fullsize; and add the following next to it...

newDiv.style.top = (event.clientY + 27) + "px";
newDiv.style.left = (event.clientX + 27) + "px";

You will also want to change all occurrances of this...

eventThingX = e.pageX;
eventThingY = e.pageY;

..to..

newDiv.style.top = (e.clientY + 27) + "px";
newDiv.style.left = (e.clientX + 27) + "px";

Hopefully that should all work. I really don't like the effect, but if more people request it I might look at building it into the script. If you make it work though please don't upload it as a script to userscripts.

 
Maged Samuel User

I tested your suggestions Znerp and it works but wanted to mention you an issue which is that the enlarged version of the thumbnail shows cut off if the thumbnail is near the bottom or top of the screen. The workaround is to scroll a little bit higher or lower to make more room for the full thumbnail to show completely but non only this workaround is not convenient but also it can't work in some cases in which scrolling down (or up) is the ultimate and can't scroll any further.

TO the best of my knowledge this problem should be eliminated if the thumbnail always appear on the top upper left of the screen

 
Dink Scriptwright

I happen to like the end result if I could change the loading behavior of how it displays on the left first, then jumps to the hovered position.
Maybe this could be a configurable option in the "user script commands" feature in a future version?..
aside from making more work for you (just joking!!) thanks for your help!!

 
znerp Script's Author

@Maged Samuel:

TO the best of my knowledge this problem should be eliminated if the thumbnail always appear on the top upper left of the screen

Well yes. This is why the script is written as it is.

@Dink:

if I could change the loading behavior of how it displays on the left first, then jumps to the hovered position.

This probably happens because it initially displays 27 pixels down and across from where the mouse enters the image. It probably wouldn't involve a lot more code to fix this, but that's not something I'd be interested in taking my time to do considering I won't be using it or publishing this in the near future.

As I say, if there's more interest in this then I might think about implementing it in a way similar to how you suggest.

Cross
Presentational HTML allowed.
Use <code> for inline code and <pre> for code blocks. Use &lt; and &gt; for literal < and >.
We help break paragraphs and link your links.
or cancel