METHOD AND SYSTEM FOR PRESENTING PHOTOS ON A WEBSITE
Method and system for presenting photos on a website are disclosed. The method includes selecting one or more thumbnail images in a browser window on a website in response to a select command from a user, dragging the one or more thumbnail images to a drop target in response to a drag command from the user, displaying the one or more thumbnail images in transit to the drop target as collapsible thumbnail images, and dropping the collapsible thumbnail images to the drop target in response to a drop command from the user.
Latest Yahoo Patents:
- Prioritizing items from different categories in a news stream
- Method and system for content bias detection
- Generating validity scores of content items
- Content recommendation based upon continuity and grouping information of attributes
- Systems and methods for processing electronic transactions based on consumer characteristics
This application claims the benefit of application No. 60/765,888, “Method and System for Presenting Photos on a Website,” filed Feb. 6, 2006, which is incorporated herein in its entirety by reference.
FIELD OF THE INVENTIONThe present invention relates to the field of Internet applications. In particular, the present invention relates to a method and system for presenting photos on a website.
BACKGROUND OF THE INVENTIONWith the increasing popularity of the Internet and digital photography, the Internet becomes a platform for millions of users to store, print, and share digital photos via various online photo service providers. Snapfish (www.snapfish.com) is an example of a conventional online photo service provider. The process typically involves taking photos with a digital camera and uploading the digital photos to an online photo service provider's website. From there, a user may view, print, or share the digital photos with friends and family members. Typically, the user would access the online photo service provider's website using a uniform resource locator (URL) and a unique login and password. The user may then manipulate the digital photos, such as create multiple albums, provide image names, send images to friends and family, and provide shared access to certain images. Alternatively, websites may serve as a general repository, for example as a posting website, and anyone using the correct URL would have access to the images.
One problem with conventional online photo service providers' websites is that they do not provide the same ease of use the user is accustomed to on her computer. For example, conventional websites would provide a browser window and allow a user to select her photos by clicking a selection box associated with each photo image within the browser window on the website; or by clicking a “select all” box that would select all the photos. However, if the user wants to select a group of the photos, for example twenty photos from a particular trip, the user would have to select one photo at a time, which is a time consuming process.
Another problem with conventional photo websites is that while a group of thumbnail images are being selected and dragged, the thumbnail images remain to be the same size while they are being moved, which often block the view of a large portion of the browser window. Moreover, the conventional photo website does not inform the user the number of thumbnail images being dragged. Yet another problem with convention photo websites is that the browser window does not display the maximum number of digital photo images while the size of the browser has been changed.
Yet another problem with the conventional photo websites is that the user's interim selection of the photos is not preserved when the user navigates to another web page, for example to retrieve other information. Thus, when the user returns to the web page of the conventional photo service provide, the previously photo selection may not have been recorded. This is particularly burdensome when the user needs to go to different websites to gather multiple photos for a photo album.
Yet another problem of the conventional photo websites is that when selecting from a large collection of digital photos, the user would have to traverse the browser window up and down multiple times in order to move a selection of thumbnail images from subsequent pages to the first page of the browser window for storage. This is because the storage location of the user's photo selection is typically displayed in the first page. When the user navigates to the subsequent pages, the storage location is no longer in the current view of the browser window. Such method of selecting photos by traversing up and down the browser window is inefficient and not easy to use.
Therefore, there is a need for a system and method that address these issues of the conventional photo websites. In particular, there is a need for a method and system for presenting photos on a website.
SUMMARYIn one embodiment, a method for presenting photos on a website includes selecting one or more thumbnail images in a browser window on a website in response to a select command from a user, dragging the one or more thumbnail images to a drop target in response to a drag command from the user, displaying the one or more thumbnail images in transit to the drop target as collapsible thumbnail images, and dropping the collapsible thumbnail images to the drop target in response to a drop command from the user.
In another embodiment, a system for presenting photos on a website includes one or more servers for interfacing between client devices through a communication network. The one or more servers further includes logic for selecting one or more thumbnail images in a browser window on a website in response to a select command from a user, logic for dragging the one or more thumbnail images to a drop target in response to a drag command from the user, logic for displaying the one or more thumbnail images in transit to the drop target as collapsible thumbnail images, and logic for dropping the collapsible thumbnail images to the drop target in response to a drop command from the user.
The aforementioned features and advantages of the invention as well as additional features and advantages thereof will be more clearly understandable after reading detailed descriptions of embodiments of the invention in conjunction with the following drawings.
Methods and systems are provided for presenting photos within a browser on a website. The following descriptions are presented to enable any person skilled in the art to make and use the invention. Descriptions of specific embodiments and applications are provided only as examples. Various modifications and combinations of the examples described herein will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other examples and applications without departing from the spirit and scope of the invention. Thus, the present invention is not intended to be limited to the examples described and shown, but is to be accorded the widest scope consistent with the principles and features disclosed herein.
Some portions of the detailed description which follows are presented in terms of flowcharts, logic blocks, and other symbolic representations of operations on information that can be performed on a computer system. A procedure, computer-executed step, logic block, process, etc., is here conceived to be a self-consistent sequence of one or more steps or instructions leading to a desired result. The steps are those utilizing physical manipulations of physical quantities. These quantities can take the form of electrical, magnetic, or radio signals capable of being stored, transferred, combined, compared, and otherwise manipulated in a computer system. These signals may be referred to at times as bits, values, elements, symbols, characters, terms, numbers, or the like. Each step may be performed by hardware, software, firmware, or combinations thereof.
In particular, JavaScript is used to create, monitor, change and destroy objects and change the state of various photo-related objects, in addition to keeping track of browser behavior changes initiated by the user. For example, when a user starts dragging an original thumbnail image in the browser window, the browser fires “mouse down” and “mouse move” events which are captured by the JavaScript, and an object is created to handle the event. The object is effectively a copy of the original thumbnail image, and the copy of the image is being moved around. When the object is put into the tray, it is added to the tray controller object, which monitors this new object being added to it and continues to keep track of the object. Similarly, when the user drags a thumbnail image out and removes the image from the photo tray, the browser fires “mouse down”, “mouse move”, and “mouse up” events which are captured and result in the removal of the item from the tray, removing the grayed-out effect of the original thumbnail image and allowing this image to be selectable again. In other words, each object has states, and such states are created and modified in response to user initiated changes (events) to the browser behavior.
As described above, the process of monitoring and updating states of an object is event driven. When a user performs a specific action, JavaScript that runs in the background determines the exact browser event that has been initiated according to a set of user cases. For example, if the user clicks outside of a photo and drags, that action is interpreted as the intent to draw a selection rectangle. Similarly, if the user clicks directly on an image and starts to move by a distance greater than five pixels, that action is interpreted as a drag. Then, the JavaScript starts to monitor the mouse movement and attaches the thumbnail images to the cursor at that point. While moving the cursor, the JavaScript updates the attached images' positions and waits for the user to release the image. Upon the images being released, the JavaScript determines the location of the cursor within the browser window. If the images are dropped on the photo tray, they are appended alongside the other images in the tray. If the images are dropped on an invalid drop target, a reset action is initiated and the images are snapped back to their original locations. While the user is dragging thumbnail images, the JavaScript monitors where the cursor is, and determines whether it is over a valid drop target or an invalid drop target. In the case that the cursor is over a valid drop target, the JavaScript would cause the valid drop target to be highlighted, providing a positive feedback to the user. When the cursor moves out of the valid drop target, the JavaScript would deactivate the highlighted area. This series of events is also referred to as the “hover” effect.
As shown in
As shown in
It will be appreciated that the above description for clarity has described embodiments of the invention with reference to different functional units and processors. However, it will be apparent that any suitable distribution of functionality between different functional units or processors may be used without detracting from the invention. For example, functionality illustrated to be performed by separate processors or controllers may be performed by the same processor or controllers. Hence, references to specific functional units are to be seen as references to suitable means for providing the described functionality rather than indicative of a strict logical or physical structure or organization.
The invention can be implemented in any suitable form including hardware, software, firmware or any combination of these. The invention may optionally be implemented partly as computer software running on one or more data processors and/or digital signal processors. The elements and components of an embodiment of the invention may be physically, functionally and logically implemented in any suitable way. Indeed the functionality may be implemented in a single unit, in a plurality of units or as part of other functional units. As such, the invention may be implemented in a single unit or may be physically and functionally distributed between different units and processors.
One skilled in the relevant art will recognize that many possible modifications and combinations of the disclosed embodiments may be used, while still employing the same basic underlying mechanisms and methodologies. The foregoing description, for purposes of explanation, has been written with references to specific embodiments. However, the illustrative discussions above are not intended to be exhaustive or to limit the invention to the precise forms disclosed. Many modifications and variations are possible in view of the above teachings. The embodiments were chosen and described to explain the principles of the invention and their practical applications, and to enable others skilled in the art to best utilize the invention and various embodiments with various modifications as are suited to the particular use contemplated.
Claims
1-30. (canceled)
31. A method comprising:
- receiving, at a computing device, a select command from a user for selecting a thumbnail image displayed on a website within a browser window, said select command associated with a set of user cases for identifying at least one displayed thumbnail image on the website based on a type of input triggering the select command;
- receiving, at a computing device, a drag command from a user for dragging the thumbnail image to a drop target on the website;
- initiating, via the computing device, a browser event in response to said drag command, said browser event initiated in association with a user case from said set of user cases that corresponds to said select command;
- causing, via the computing device, a copy of the thumbnail image to be displayed during transit to said drop target in response to said drag command, said copy of the thumbnail image generated in accordance with said browser event; and
- causing, via the computing device, the thumbnail image to be displayed in accordance with said drop target upon the copy of the thumbnail image being dropped to the drop target, said display of the thumbnail image at the drop target in response to a detected drop command associated with said copy of the thumbnail image and in accordance with the browser event.
32. The method of claim 31, wherein said thumbnail image is a plurality of thumbnail images.
33. The method of claim 31, further comprising:
- determining that the drop target is permitted to receive the copy of the thumbnail image, said determination based upon a position of said copy of the thumbnail image within the browser window based on said drag command.
34. The method of claim 33, further comprising:
- visually modifying said drop target in response to said determination, said visual modification comprises highlighting said drop target; and
- dropping the copy of the thumbnail image to the drop target in response to the drop command from the user.
35. The method of claim 34, further comprising visually modifying said drop target in response to said drop command.
36. The method of claim 31, further comprising:
- removing the thumbnail image from its original display position on the website in response to said dropping the copy of the thumbnail image to the drop target.
37. The method of claim 31, further comprising:
- causing said thumbnail image to become unselectable during said transit of said copy of the thumbnail image; and
- in response to said drop command of the copy of the thumbnail image, enabling the thumbnail image as selectable at the drop target.
38. A non-transitory computer-readable storage medium tangibly encoded with computer-executable instructions, that when executed by a processor, perform a method comprising:
- receiving a select command from a user for selecting a thumbnail image displayed on a website within a browser window, said select command associated with a set of user cases for identifying at least one displayed thumbnail image on the website based on a type of input triggering the select command;
- receiving a drag command from a user for dragging the thumbnail image to a drop target on the website;
- initiating a browser event in response to said drag command, said browser event initiated in association with a user case from said set of user cases that corresponds to said select command;
- causing a copy of the thumbnail image to be displayed during transit to said drop target in response to said drag command, said copy of the thumbnail image generated in accordance with said browser event; and
- causing the thumbnail image to be displayed in accordance with said drop target upon the copy of the thumbnail image being dropped to the drop target, said display of the thumbnail image at the drop target in response to a detected drop command associated with said copy of the thumbnail image and in accordance with the browser event.
39. The non-transitory computer-readable storage medium of claim 38, wherein said thumbnail image is a plurality of thumbnail images.
40. The non-transitory computer-readable storage medium of claim 38, further comprising:
- determining that the drop target is permitted to receive the copy of the thumbnail image, said determination based upon a position of said copy of the thumbnail image within the browser window based on said drag command.
41. The non-transitory computer-readable storage medium of claim 40, further comprising:
- visually modifying said drop target in response to said determination, said visual modification comprises highlighting said drop target; and
- dropping the copy of the thumbnail image to the drop target in response to the drop command from the user.
42. The non-transitory computer-readable storage medium of claim 41, further comprising visually modifying said drop target in response to said drop command.
43. The non-transitory computer-readable storage medium of claim 38, further comprising:
- removing the thumbnail image from its original display position on the website in response to said dropping the copy of the thumbnail image to the drop target.
44. The non-transitory computer-readable storage medium of claim 38, further comprising:
- causing said thumbnail image to become unselectable during said transit of said copy of the thumbnail image; and
- in response to said drop command of the copy of the thumbnail image, enabling the thumbnail image as selectable at the drop target.
45. A system comprising:
- at least one computing device comprising:
- memory storing computer-executable instructions; and
- one or more processors for executing said computer-executable instructions, comprising: receiving a select command from a user for selecting a thumbnail image displayed on a website within a browser window, said select command associated with a set of user cases for identifying at least one displayed thumbnail image on the website based on a type of input triggering the select command; receiving a drag command from a user for dragging the thumbnail image to a drop target on the website; initiating a browser event in response to said drag command, said browser event initiated in association with a user case from said set of user cases that corresponds to said select command; causing a copy of the thumbnail image to be displayed during transit to said drop target in response to said drag command, said copy of the thumbnail image generated in accordance with said browser event; and causing the thumbnail image to be displayed in accordance with said drop target upon the copy of the thumbnail image being dropped to the drop target, said display of the thumbnail image at the drop target in response to a detected drop command associated with said copy of the thumbnail image and in accordance with the browser event.
46. The system of claim 45, further comprising:
- determining that the drop target is permitted to receive the copy of the thumbnail image, said determination based upon a position of said copy of the thumbnail image within the browser window based on said drag command.
47. The system of claim 46, further comprising:
- visually modifying said drop target in response to said determination, said visual modification comprises highlighting said drop target; and
- dropping the copy of the thumbnail image to the drop target in response to the drop command from the user.
48. The system of claim 47, further comprising visually modifying said drop target in response to said drop command.
49. The system of claim 45, further comprising:
- removing the thumbnail image from its original display position on the website in response to said dropping the copy of the thumbnail image to the drop target.
50. The system of claim 45, further comprising:
- causing said thumbnail image to become unselectable during said transit of said copy of the thumbnail image; and
- in response to said drop command of the copy of the thumbnail image, enabling the thumbnail image as selectable at the drop target.
Type: Application
Filed: Aug 12, 2013
Publication Date: Feb 13, 2014
Applicant: YAHOO! INC. (Sunnyvale, CA)
Inventor: Scott Schiller (Sunnyvale, CA)
Application Number: 13/964,746
International Classification: G06F 3/0486 (20060101);