My First Greasemonkey Script
Today, I wrote my first Greasemonkey Script! Woo-Hoo!
I always wanted to try out my hand at Greasemonkeyness and today turned out to be that day. I was doing a Google Image Search for Hot Lyla from Friday Night Lights and as always I had to go through a number of clicks to open the photos that looked “promising” in new tabs before starting to view them.
So, being a long weekend, I thought why not do a NetFlix kind of Popup for Google Image Search Results so that I don’t have to go through this clicking routine everytime I am searching for a hot girl!
My Script is a mashup of the original script by Patrick Cavit and a Dynamic Drive CSS Library.
Although, Eric Hamiter & CustomizeGoogle have already fixed the most irritating issue of having to click twice on search result to get to original image, I wanted to take it a step further by not having to click at all (atleast for small/medium images). Instead of opening images in separate tabs, you can view it in a CSS Popup on Mouseover.
Unlike NetFlix, who have fixed size Popup for Movie Info, I had to figure out the least ugly way to position Popups since the images are of random sizes.. The default CSS Library was always positioning the Popup below the search result with a little left offset. This was looking very ugly for the search results on the right & bottom portion of the page. I was not able to fix this issue through CSS because of my limited knowledge of it. So, I had to write some ugly JavaScript to take care of this.
You can find the Script here & here.
I can’t help checking the Install Count at UserScripts.org every now and then to boost my ego.
Update - 08/06/2008 - On megamorphg’s request, added the resize feature. The large images are now resized to fit the available screen area, no need to scroll any more. This feature is dynamic in the sense that the same image will open in different sizes up to its full size depending on the position of its thumbnail on the screen when mouse is hovered over it.





