Photo browse and zoom

Groups of photo thumbnails are presented to the user, and where a user selects one of the thumbnails, a transition is provided replacing the group of thumbnails with the photo represented by the selected thumbnail. The photo may be displayed without cropping or stretching. In addition, a zoom/enlargement animation of the selected thumbnail is provided, and also possibly of the remaining thumbnails in the group, which then transitions into the represented photo. In addition, after or during the zooming animation, a cross-fading may occur such that the thumbnails fade out and the represented photo fades in. These types of transitions and user inputs both while the user is manually browsing thumbnails and when the user is viewing an automated slideshow of the thumbnails.

BACKGROUND

With the growing popularity of digital cameras, photos are more commonly stored electronically on computers instead of physically on paper. User interfaces have been developed to allow a user to manage and view his or her photos electronically. As part of these user interfaces, the user sometimes has the option of viewing photos as smaller, thumbnail versions.

In addition, the user is sometimes presented with the option of choosing a particular layout in which the photo thumbnails are arranged for viewing. For instance, a user may view a tiled layout where the thumbnails are arranged in rows and columns, or as a stacked view. In many such thumbnail layouts, the thumbnail versions of the photos are treated, such as by cropping and/or stretching, so as to fit within a particular frame size and shape. It is difficult for the user to easily gain an appreciation for what the associated photo will look like from the treated thumbnail.

SUMMARY

Aspects of the present disclosure are directed to presenting photo representations, such as thumbnail versions of the photos they represent, in one or more groups, or slides. Each group may have one or more such thumbnails. Where a user selects one of the thumbnails, a transition is provided to replace the group of thumbnails with the photo that is represented by the selected thumbnail. The photo may be displayed in its entirety, such that there is no cropping of the photo. In addition, the photo may be displayed such that there is no stretching to fit the region in which it is displayed.

Further aspects are directed to providing a zoom/enlargement animation of the selected thumbnail, and also possibly of the remaining thumbnails in the group, which then transitions into the represented photo. In addition, after or during the zooming animation, a cross-fading may occur such that the thumbnails fade out and the represented photo fades in.

Further aspects are directed to allowing the user to select the displayed full photo to return to the thumbnail group view. Or, the computer may automatically return the user to the thumbnail group view upon the expiration of a time period in which the user has not selected the full photo.

Still further aspects are directed to providing these types of transitions and user inputs both while the user is manually browsing thumbnails and when the user is viewing an automated slideshow of the thumbnails.

These and other aspects of the disclosure will be apparent upon consideration of the following detailed description of illustrative embodiments.

DETAILED DESCRIPTION OF ILLUSTRATIVE EMBODIMENTS

Illustrative Computing Environment

FIG. 1illustrates an example of a suitable computing system environment100in which aspects as described herein may be implemented. Computing system environment100is only one example of a suitable computing environment and is not intended to suggest any limitation as to the scope of use or functionality of various aspects as described herein. Neither should computing system environment100be interpreted as having any dependency or requirement relating to any one or combination of components illustrated in illustrative computing system environment100.

One or more other general purpose or special purpose computing system environments or configurations may be used. Examples of well known computing systems, environments, and/or configurations that may be suitable include, but are not limited to, personal computers (PCs); server computers; hand-held and other portable devices such as personal digital assistants (PDAs), tablet PCs or laptop PCs; multiprocessor systems; microprocessor-based systems; set top boxes; programmable consumer electronics; network PCs; minicomputers; mainframe computers; distributed computing environments that include any of the above systems or devices; and the like.

Aspects of the disclosure herein may be described in the general context of computer-executable instructions, such as program modules, stored on one or more computer-readable media and executable by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. Embodiments discussed herein may also be operational with distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer-readable media including memory storage devices.

With reference toFIG. 1, illustrative computing system environment100includes a general purpose computing device in the form of a computer100. Components of computer100may include, but are not limited to, a processing unit120, a system memory130, and a system bus121that couples various system components including system memory130to processing unit120. System bus121may be any of several types of bus structures including a memory bus or memory controller, a peripheral bus, and a local bus using any of a variety of bus architectures. By way of example, and not limitation, such architectures include Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MCA) bus, Enhanced ISA (EISA) bus, Video Electronics Standards Association (VESA) local bus, Advanced Graphics Port (AGP) bus, and Peripheral Component Interconnect (PCI) bus, also known as Mezzanine bus.

Computer100typically includes a Variety of computer-readable media. Computer readable media can be any available media that can be accessed by computer100such as volatile, nonvolatile, removable, and non-removable media. Computer-readable media are tangible media, and may include volatile, nonvolatile, removable, and non-removable media implemented in any method or technology for storage of information such as Computer-readable instructions, data structures, program modules or other data. For example, computer-readable media includes random-access memory (RAM), read-only memory (ROM), electrically-erasable programmable ROM (EEPROM), flash memory or other memory technology, compact-disc ROM (CD-ROM), digital video disc (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by computer100. Any single computer-readable medium, as well as any combination of multiple computer-readable media, are both intended to be included within the scope of the term “computer-readable medium” as described and claimed herein. Any single computer-readable medium, as well as any combination of multiple computer-readable media, are both intended to be included within the scope of the term “computer-readable medium” as described and claimed herein.

System memory130includes computer-readable storage media in the form of volatile and/or nonvolatile memory such as ROM131and RAM132. A basic input/output system (BIOS)133, containing the basic routines that help to transfer information between elements within computer100, such as during start-up, is typically stored in ROM131. RAM132typically contains data and/or program modules that are immediately accessible to and/or presently being operated on by processing unit120. By way of example, and not limitation,FIG. 1illustrates software in the form of computer-executable instructions, including operating system134, application programs135, other program modules136, and program data137.

Computer100may also include other computer storage media. By way of example only,FIG. 1illustrates a hard disk drive141that reads from or writes to non-removable, nonvolatile magnetic media, a magnetic disk drive151that reads from or writes to a removable, nonvolatile magnetic disk152, and an optical disk drive155that reads from or writes to a removable, nonvolatile optical disk156such as a CD-ROM, DVD, or other optical media. Other computer storage media that can be used in the illustrative operating environment include, but are not limited to, magnetic tape cassettes, flash memory cards, digital video tape, solid state RAM, solid state ROM, and the like. Hard disk drive141is typically connected to system bus121through a non-removable memory interface such as an interface140, and magnetic disk drive151and optical disk drive155are typically connected to system bus121by a removable memory interface, such as an interface150.

The drives and their associated computer storage media discussed above and illustrated inFIG. 1provide storage of computer-readable instructions, data structures, program modules and other data for computer100. InFIG. 1, for example, hard disk drive141is illustrated as storing an operating system144, application programs145, other program modules146, and program data147. Note that these components can either be the same as or different from operating system134, application programs135, other program modules136, and program data137, respectively. Operating system144, application programs145, other program modules146, and program data147are assigned different reference numbers inFIG. 1to illustrate that they may be different copies. A user may enter commands and information into computer100through input devices such as a keyboard162and a pointing device161, commonly referred to as a mouse, trackball or touch pad. Such pointing devices may provide pressure information, providing not only a location of input, but also the pressure exerted while clicking or touching the device. Other input devices (not shown) may include a microphone, joystick, game pad, satellite dish, scanner, or the like. These and other input devices are often coupled to processing unit120through a user input interface160that is coupled to system bus121, but may be connected by other interface and bus structures, such as a parallel port, game port, universal serial bus (USB), or IEEE 1394 serial bus (FIREWIRE). A monitor191or other type of display device is also coupled to system bus121via an interface, such as a video interface190. Video interface190may have advanced 2D or 3D graphics capabilities in addition to its own specialized processor and memory.

Computer100may also include a touch-sensitive device165, such as a digitizer, to allow a user to provide input using a stylus166. Touch-sensitive device165may either be integrated into monitor191or another display device, or be part of a separate device, such as a digitizer pad. Computer100may also include other peripheral output devices such as speakers197and a printer196, which may be connected through an output peripheral interface195.

Computer100may operate in a networked environment using logical connections to one or more remote computers, such as a remote computer180. Remote computer180may be a personal computer, a server, a router, a network PC, a peer device or other common network node, and typically includes many or all of the elements described above relative to computer100, although only a memory storage device181has been illustrated inFIG. 1. The logical connections depicted inFIG. 1include a local area network (LAN)171and a wide area network (WAN)173, but may also or alternatively include other networks, such as the Internet. Such networking environments are commonplace in homes, offices, enterprise-wide computer networks, intranets and the Internet.

When used in a LAN networking environment, computer100is coupled to LAN171through a network interface or adapter170. When used in a WAN networking environment, computer100may include a modem172or another device for establishing communications over WAN173, such as the Internet. Modem172, which may be internal or external, may be connected to system bus121via user input interface160or another appropriate mechanism. In a networked environment, program modules depicted relative to computer100, or portions thereof, may be stored remotely such as in remote storage device181. By way of example, and not limitation,FIG. 1illustrates remote application programs182as residing on memory device181. It will be appreciated that the network connections shown are illustrative, and other means of establishing a communications link between the computers may be used.

As discussed previously, touch-sensitive device165may be a device separate from or part of and integrated with computer100. In addition, any or all of the features, subsystems, and functions discussed in connection withFIG. 1may be included in, coupled to, or embodied integrally as part of, a tablet computer. For example, computer100may be configured as a tablet computer or a handheld device such as a PDA where touch-sensitive device165would be considered the main user interface. In such a configuration touch-sensitive device165may be considered to include computer100. Tablet computers are well-known. Tablet computers interpret gestures input to touch-sensitive device165using stylus166in order to manipulate data, enter text, create drawings, and/or execute conventional computer application tasks such as spreadsheets, word processing programs, and the like. Input may not only be made by stylus166, but also by other types of styli such as a human finger.

Electronic File System

An electronic file system may be implemented by computer100to manage photos and other objects stored in the various electronic media to which computer100has access. The file system may be part of the other program modules136, such as a software application, and/or part of operating system134. Using the electronic file system, the user may interact with the objects via, for instance, a graphical user interface. The graphical user interface may cause various visual features to be displayed on a display such as monitor191. For example, the graphical user interface may include displayed representations of each object, or of a subset of the objects, stored by the electronic file system. A representation may be any visual representation such as an icon or a picture. For example, where the object is a photo, a representation of the photo may be a thumbnail of the photo itself, or a graphical icon.

The graphical user interface may also respond to user input. The user input may be received via any user input device such as mouse161, digitizer165and stylus166, and/or keyboard162. In response to such user input, computer100interprets the input and determines an appropriate action, which may include adjusting what is displayed in the graphical user interface. For example, where a representation is selected by the user, computer100may cause the graphical user interface to visually indicate on monitor191that the representation has been selected.

Photo Layouts

The user may also choose to view a selected set of representations, such as photo representations. For instance, the user may open a folder of photos and wish to see the set of representations associated with those photos. Or, the user may perform a search for particular photos and wish to view the search results as a set of photo representations. Where a set of photo representations are to be viewed, they may be arranged in the graphical user interface in accordance with a selected view. The view may define any one or more aspects of how the representations are presented on the graphical user interface. For example, without listing herein every possibility, the view may define how many representations are displayed simultaneously, how representations may be grouped together and/or how many representations may be in each group, whether the representations are shown as two-dimensional representations (e.g., a simple thumbnail) or three-dimensional representations (e.g., a thumbnail photo shown at an angle), and/or the sizes of the representations. It will therefore be understood that many types of views may be provided, and that the particular views described herein are merely illustrative.

One example of a view is what is referred to herein as a mantel view, or mantel layout. The mantel view shows thumbnail representations of photos in a three-dimensional manner as though the thumbnails were photographs leaning up against a wall, such as on a fireplace mantel. An example of this is shown inFIG. 2, which shows three mantel view groups201,211,221. Group201, for instance, contains four representations202,203,204,205. Some of the representations overlap, such as representation204overlapping representations203and205, and some of the representations are shown at an angle, such as representation205, which is angled so as to appear as though it is being viewed from the right instead of “head on” (i.e., instead of at an angle normal to the photo being represented). These effects may provide a layered three-dimensional appearance.

Another example of a view is what will be referred to herein as the magazine view or layout. The magazine view may be considered a subset of a tiled view. In the magazine view, photo representations are arranged in one or more groups such that each representation is displayed as a two-dimensional thumbnail version of the photo with which it is associated. At least some of the representations are of different sizes relative to each other. One of the representations in each group may be larger than all of the others in that group such that the larger photo appears to the user as the main photo and the remaining photos appears to the user a supporting photos. The photo that is the main photo in a magazine view may be randomly chosen or may be chosen based on photo metadata, user preferences, and/or other factors. An example of a magazine view is shown inFIG. 7. Here, a magazine group701has five photo representations702,703,704,705,706. In this example, representation702is the largest in group701, representations703and704are of medium size, representation705is of a smaller size, and representation706is of the smallest size in group701.

Photos (or photo representations) are grouped where they are arranged on the display such that they appear as a group separated from adjacent photos (or photo representations) that are not in the group by a distance that is larger than a distance between adjacent photos (or photo representations) within the group. For instance, referring again toFIG. 2, the photos in group201are closer to each other than to the photos in any of the other groups ofFIG. 2. Additionally, each group may be bounded by a visible periphery encircling or otherwise disposed around the group and/or some other displayed feature that visually separates photos in a group from photos outside the group. For instance, inFIG. 2, a visible box209,219,229is drawn around each group201,211,221, respectively, making it clear to the user how the groups are defined.

Selection and Zooming of Photos

Where the user is viewing a set of photo representations such as inFIG. 2, the user may additionally wish to view the actual photo associated with one or more of the representations. For instance, the user may select any one of the photo representations, such as representation223, using a mouse, stylus, or other user input device. In this case, representation223is a thumbnail representation of the photo with which it is associated. In response to the user selection, the content displayed in the group in which the selected representation resides (in this case, group221) zooms in. The zooming may be in a single step, in a plurality of sequential steps (with gradually increasing zoom level) or in a continuous fashion. In the latter two cases, the zooming in multiple steps or continuously would be an animation of the content displayed in group221to increase in size. In doing so, representation223and/or its surrounding environment displayed in group221(including representations222and224) may be animated to increase in size over time.

An animation is the sequential visual presentation of a graphical feature (such as a photo representation, a set of photo representations, and/or a background) in a first state and in a different second state, as well as in at least a different third state presented in between the first and second states. For example, where a photo representation increases or decreases in size from a start size to a end size, then the representation can be animated by visually presenting the representation not only in the start and end sizes, but also in at least one intermediate size greater than the start size and smaller than the end size. In addition, the intermediate size(s) would be visually presented at a time in between the visual presentation of the start and end sizes. The visual presentation of each state may be at sequential non-overlapping times or at sequential overlapping times.

A photo representation or other graphical feature may additionally be animated to move in the display along a predetermined or non-predetermined path. In such a case, the graphical element would be displayed in at least three locations along a path, such as at each sequential incremented pixel location or other unit of movement along the path. The number of intermediate displayed positions/states along a path may depend upon the length of the path, the speed of movement along the path, and/or the desired smoothness of displayed movement. For example, a photo representation may be displayed at one hundred different sequential intermediate positions along a path over a period of several seconds to give the user the visual impression of smooth movement along the path.

Thus, in response to user selection of a photo representation, the photo representation and/or other graphical features may animate in size and/or in location. For instance, referring toFIG. 3, which is a screenshot taken at a time afterFIG. 2, it can be seen that in response to the user having selected photo representation223, photo representation223has increased in size to an intermediate size. And, referring toFIG. 4, which is a screenshot taken at a time afterFIG. 3, photo representation223has continued to increase in size to a larger size. Here, only three sizes of photo representation223are shown in the animation illustrated inFIGS. 2-4. However, more than three total sizes may be implemented to achieve a smoother animation.

It is also noted that other graphical features in group221may also simultaneously increase in size along with selected photo representation223. For instance, the remaining unselected photo representations222and224may animate to increase in size simultaneously with photo representation223. Also, the background, or interstitial region(s), between photo representations222,223,224may also increase in size. In addition, at least one of the photo representations are animated to move to different locations. For instance, where the location of a photo representation is measured by its center, then photo representation222can be considered to have moved up and to the left, and photo representation224can be considered to have moved up and to the right By animating other features in addition to the selected representation223, this can give the user the impression of zooming in to the graphical content of group221. Also, where any one or more of the graphical features of group221are increased in size or zoomed in, the features may be cropped so as to extend up to, but not outside, boundary229of group221. This is shown, for example, inFIG. 3, where photo representations222and224extend up to, but not beyond, boundary229. Such group boundary cropping may give the user the impression that the user is looking through a frame defined by boundary229while the contents of the frame are being zoomed in upon.

Thus far, in response to the user selection of photo representation223, an animation has occurred as shown inFIGS. 2-4.FIG. 5is a screenshot at a time afterFIG. 4, showing how the previous graphical content of group221is fading out, and a new graphical feature, photo501, is fading in. Fading in and out is indicated inFIG. 5by broken lines. A graphical feature fades out when it gradually disappears over time by way of changing color, changing contrast, changing brightness, and/or changing transparency. A graphical feature fades in when it gradually appears over time by way of changing color, changing contrast, changing brightness, and/or changing transparency.

In this example, all of the graphical features displayed inFIG. 4in group221are fading out simultaneously with photo501fading in. This simultaneous fading out and fading in may appear to the user as though the feature fading out is being replaced with the feature fading in. This is referred to as cross-fading.

In the present example, photo representations222,223, and224, as well as any other graphical features such as the background, which were previously displayed in group221inFIGS. 24, cross-fade with photo501.FIG. 6shows a screenshot taken after the cross-fading has finished, which shows that photo501is displayed in full while photo representations222,223, and224are no longer displayed. The cross-fading may occur while one or more features in group201(such as representation223) are still animating to increase in size. This may provide a very smooth appearance to the user. Or, the cross-fading may occur only after the animation to increase in size has ceased.

As previously mentioned, each photo representation222,223,224is associated with a different photo. Here, the photo that cross-fades in or otherwise appears (photo501) is associated with the selected photo representation (photo representation223). If the user had selected a different representation, then an associated photo other than photo501would have appeared inFIGS. 5 and 6.

Although photo representation223may be thumbnail version of photo501that may be cropped and/or stretched, photo501as displayed in the screenshot ofFIG. 6is shown in its entirety, without any cropping or stretching. This allows the user to see the entire associated photo when selecting the photo's associated photo representation. Also, to maximize the fit of photo501within boundary229, photo501is sized and positioned within boundary229so as to span across an entirety of the area within boundary229in at least one direction (in this case, in the left/right direction ofFIG. 6). Because no stretching or cropping of photo501has occurred in this embodiment, there may be a space between one or two edges of photo501and boundary229. In this case, there is a space both immediately above and immediately below photo501. Alternatively, photo501may be cropped or stretched as desired. In that case, photo501may be sized, cropped, and/or stretched so as to fully fill the entire frame defined by boundary229.

FIGS. 7-11show a similar situation asFIGS. 2-6, except that the view of photo representations is a magazine view instead of a mantle view. Again, the zooming/enlarging features as described herein may be applied to any view having one or more displayed photo representations. Referring toFIG. 7, a magazine group701contains photo representations702,703,704,705, and706and is visually defined by a visual boundary F20. In the present example, the user selected photo representation704. In response, as shown inFIGS. 8 and 9, photo representation704animates to increase in size. Although in this example none of the other photo representations702,703,705, or706increase in size, some or all of them may also increase in size simultaneously with photo representation704.

Next, referring toFIGS. 10 and 11, and also in response to the user selection of photo representation704, photo1001(which is associated with selected photo representation704), fades in while photo representations702-706fade out. In other words, a cross-fade occurs. As in the previous example, photo1001is shown in its entirety and spans in at least one direction (in this example, in the up/down direction ofFIG. 11) entirely across the frame defined by boundary F20. Again, photo1001is displayed without any cropping or stretching, unlike it associated photo representation704.

In both the example ofFIGS. 2-6and the example ofFIGS. 7-11, a zooming-in followed by (or simultaneously with) a cross-fade has been described to occur responsive to a user selection of a photo representation. However, in either example, the zooming may be removed such that only the cross-fading or other type of appearance of the associated photo occurs. Also, in the previous examples, the associated photo has been described as spanning across, but remaining within, the boundary of the group in which the original photo representation was displayed. However, the associated photo may alternatively be displayed to span in at least one direction across the entire physical display, across an entire window provided by the operating system or a software application, or across other defined region. Moreover, responsive to user selection of a photo representation, the visible boundary defining the periphery of the group within which the photo representation resides may expand or contract. In addition, the above responses to a user selection of a photo representation may occur while the user is browsing a set of photo representations manually, or during an automatic slideshow presentation.

Regardless of the particular view in which the photo representations are displayed and how the associated photo is displayed, the user may return to the original photo representation view simply by selecting the displayed associated photo or by waiting a sufficient amount of time. For example, if the user is now at the screenshot ofFIG. 6, having already selected photo representation223, the user may now select (using a mouse, stylus, or other input device) photo501. In response, the computer may return (either through animation, cross-fading, or instantly) to the screen ofFIG. 2. Alternatively, the computer may determine that the user has not selected photo501within a certain amount of time, in which case the computer may decide to automatically return to the screen ofFIG. 2. The amount of time may be measured from any point during or after the user input selection of photo representation223. For example, the amount of time may be measured starting with the selection of photo representation223, or it may be measured starting with the animation in response to the user selection, or it may be measured starting with the completion of the animation and cross-fading.

Conclusion

Thus, an improved way of browsing and viewing photos has been described, in which a user may conveniently select a photo representation, and in response a transition is presented such that the user sees the photo representation replaced with its associated entire photo without any extra treatments. This may be important where the photo representation has been treated, such as by cropping or stretching.

In discussing the above features, all actions involved, such as but not limited to, receiving user input, responding to user input, selecting, choosing, assigning, defining, calculating, displaying, animating, fading in and out, storing information, and making decisions, may be performed by the user and/or by computer100as instructed by software embodied as computer-executable instructions. The computer-executable instructions may be stored on a computer-readable medium such as RAM132, ROM131, and/or disk156. The software may be part of operating system134, one or more application programs135, and/or one or more other program modules136.