Extra caution is recommended when installing recently uploaded/updated scripts (read more)
Be sure you trust any scripts you install
Google Image Relinker with Mouseover
View Google Image Search links in CSS Popup on Mouseover
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.
Update - 06/18/2007 - Based on feedback of "Can't Say No", I retested the Script on Firefox 2.0 with CustomizeGoogle installed. Its weird that they seem to go along fine in Firefox 1.5 but somehow my Script was breaking "Orgin Image" feature of CustomizeGoogle in Firefox 2.0. Anyway, as a precaution I added a onload event listener and now doing my stuff there. Should work now.
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.
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.
Update - 06/18/2007 - Based on feedback of "Can't Say No", I retested the Script on Firefox 2.0 with CustomizeGoogle installed. Its weird that they seem to go along fine in Firefox 1.5 but somehow my Script was breaking "Orgin Image" feature of CustomizeGoogle in Firefox 2.0. Anyway, as a precaution I added a onload event listener and now doing my stuff there. Should work now.
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.
You could comment on this script if you were logged in.
login to vote
Hey cool script. I just made a similar one for Amazon: http://userscripts.org/scripts/show/35036
I see you hide the popover image when the mouse cursor leaves the original thumbnail. Good idea, I might try that. Right now I hide the popover when the mouse cursor leaves the popover...
login to vote
@megamorphg
check out the updated version. i hope it fits your requirement.
login to vote
Would be really awesome script if option was available to resize the pop up image automatically! It's a real pain in the *** to scroll around!
login to vote
Ok, I got it to work now. I'm positive. :)
login to vote
Oh my goodness... don't know how I didn't notice the popups weren't working when I did this.
I wish I could remove these last 2 comments. Next time I'll make sure I have it right.
Sorry!
login to vote
Hey, I just fixed my problem by commenting on the following line:
window.addEventListener("load", alterLinks, false);Nice, now I have the control I want.
Thank you! :)
login to vote
Hi!
Great script, thank you for that, but may I make a request?
Very often, I like to see the context in which the photos/images are inserted, to learn more about them. So it would be really great if you would make it an option in the source as to what happens when you click the image.
So it would be, for example, a variable at the top of the source, with value 0 to remain the link untouched and thus, go to google's link when clicked; or value 1 to open directly the image.
I would appreciate that very much. It's the only reason why I'm not using your script all the time, since it's a real annoyance to me.
Thank you very much! Good work.
login to vote
Nevermind. It was a conflict with another script.
login to vote
Is it just me or does this script no longer work?
login to vote
I have added the script Picsearch with Mouseover. Give it a try.
login to vote
Can you please port or create a similar script for picsearch.com (they have a useful animation search option)
Thanx in advance
login to vote
Thanks, I find the other script to be quite handy and was just wondering if I should take the time to switch to yours.
Both seem to be very well done.
login to vote
Not much. That's why I added my comment on that script page. Its also about personal preference. I like my pop-ups next to my images, allows me to preview them faster. But this doesn't work too well for large images, where the other script scores.
login to vote
How is this script different from this one: http://userscripts.org/scripts/show/7863 ??
login to vote
Thanks. It seems there really was a compatibility problem with CustomiseGoogle. I have updated the script. Please try again.
login to vote
500X...huh!...I thought it will be more like 50X:)
I understand the middle column/large photo issue. Nothing much can be done for it. This Script's purpose was just to provide a quick preview. If the image is too big, then we just have to click on it.
And that's why clicking on image or "Origin Image" link should have taken you to the actual image. You can see the source, it checks if CustomizeGoogleOptions has already done its thing.
Are you sure you have just my Script & CustomizeGoogleOptions installed and no other Extension/Script for Google Image Search? Not even Patrick Cavit's Script or Eric Hamiter's Extension?
I just installed CustomizeGoogleOptions on this machine which already had my Script and everything is working fine.
login to vote
A few quirks...
When both are installed, this script appears to disable CustomizeGoogle's "Rewrite links to point straight to the images" functionality.
I can imagine the coding is a pain, but this script also has real problems positioning and displaying large images, especially wide ones. If a middle column Google Image result happens to be a wide photo, you have to engage in a long, uphill battle trying to keep the mouse hovered over the photo whilst scrolling left and right with the arrow keys in order to actually view the entire image. Ultimately, it takes about 500x longer to see the image as it would by just clicking CustomizeGoogle's "origin image" link, which, as I mentioned above, this script disables. And if you happen to be using a mouse without a scroll wheel, seeing the full pop-up of a large/tall image seems like it would be an impossibility.