Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does Bing.com create enlarged thumbnails?

When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.

http://www.bing.com/images/search?q=Heros&FORM=BIFD#

I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.

like image 924
Lily Avatar asked Nov 17 '25 00:11

Lily


2 Answers

If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.

like image 163
cwallenpoole Avatar answered Nov 19 '25 14:11

cwallenpoole


It's the same image. It just enlarges it slightly.

like image 40
Josh Stodola Avatar answered Nov 19 '25 12:11

Josh Stodola