Google Image Search Effect

Today I'm going to mimic the Google Image search result effect. Google has been sporting a new look on their image search results for quite some time now. Notice that when you hover over an image, it zooms, making it stand out from a blob of image search results. The texts are cut to the minimum as well, showing only the hovered image's info.

A lot of people noticed the change, they even think that Google was threatened because Bing was the first to implement the image-only results. And I think that the rumors are true. Bing has a very simple yet really sophisticated user-experience. Image-> Hover -> Info. Google thought it was a good idea, why not make it better. Competition -> innovation.


Now, the image effect might be too simple to warrant even the slightest of attention, but that is the beauty of a great design. However, I find it weird how easily stunned I was when I first experienced this effect.

Before I begin, here's the bundle with the corresponding demo:

• Javascript (Complete)  [link]
• Javascript (Minified)  [link]
• Compressed [link]
• Demo

I'll quickly go about the machinations behind the image zoom, then create one that can be used for other web sites (most of which are in the demo). Now, Google is currently running this feature within a <canvas> tag, a feature of HTML5, which, I am sad to say, I know little about. But, as all deconstructions go, we strip down the image search to the bare essentials, and appreciate the beaty of its simplicity. And even though I am bereft with HTML5 experience, div and span is staying in HTML5 (so I've heard), so we are still good to go.

The Search?

As we can see here, there are a few components to execute the effect: the timeout for checking if the user is hovering over an image long enough to warrant a zoom; the expansion of the image, scaling depending on the image's original size (if it's big, expand. Keep the original size if it is too risky to expand, like pixelation or the width-height diff is too high); and the addition of information for the image.

Furthermore, the effect is sensitive to offset. Position is key, because there are a lot of things happening if the image is partly hidden under the scroll, or the image is at the edge of the page.

Usage

For a demo with example, kindly checkout the example page I've prepared.

There are a few things that were very important in mimicking the google image search result effect, one is the scaling, another is the offset of the image. For the flickr images, the results were retrieved via the Flickr API.

Relevant Methods
popper.initialize(settings);
Settings refers to a js object containing the attributes needed. For example:

settings = {"padding" : 3,
      "maxDim" : 250,
      "infoHeight" : 100 }

The above example initializes all containers with the popphoto class. Refer to the demo for more info.

popper.grabFromFlickr(flickrcont, keywords, count)

Emo Much

This method accesses Flickr API [link] in a minute manner. I simply refer to a tag, get the needed information, and present it onto the page. The flickrcont refers to the ID of the container upon which we are to put the flickr grabs. keyword is an Array refering to the tags that are going to be used. count refers to the number of results to be shown. Kindly look at the demo for more information.

Below is a sample, as used in the Demo:

popper.grabFromFlickr('flickrload', ['love'], 20);

The container here has an id "flickrload", the tag used in the demo is "love", so we go about with ["love"], furthermore, the tag array is inclusive of one another (logic AND). Lastly, the "count" represents the number of items to be retrieved.

I actually did this partly because I'm going to make a Flickr Instant application tomorrow. And this is a module of it. Ehehe. Two birds, one stone, yes?

Conclusion
All in all we attempted to destroy a piece, take what is essential, and put it into the simplest atom possible. I believe we have achieved it here.

Lately, I'm starting to think that programming, or at least the programming sphere that I am  moving towards, is a work of art. No, not with the design, but with the code. How the binaries and booleans go about a certain flow, the composition of methods and classes, as if to create a seemless organic exhibit. A great example would be the effect in Google's Image search result. As if in a museum, one would easily pass through this canvas, because you are not really in Google's area to marvel how an image zooms, but - as with museums - browse the inventory of static works.

But if one would care to look closely, as with everything, one would actually see that there is a mutually exclusive beauty.

---
The things written in this article are approximates on the application discussed above. I did not refer or read the code in the site, perhaps because of a deep respect for the developer, and maybe because the script is now completely minified and could be seizure inducing. I am reading the site through my own machinations of analyzing the components, and slowly studying the functionalities as they come along.  

PS.  If you find any bugs, please do tell me. Thanks!

Share  Tweet