U.S. patent application number 13/964746 was filed with the patent office on 2014-02-13 for method and system for presenting photos on a website.
This patent application is currently assigned to YAHOO! INC.. The applicant listed for this patent is YAHOO! INC.. Invention is credited to Scott Schiller.
Application Number | 20140047369 13/964746 |
Document ID | / |
Family ID | 38335419 |
Filed Date | 2014-02-13 |
United States Patent
Application |
20140047369 |
Kind Code |
A1 |
Schiller; Scott |
February 13, 2014 |
METHOD AND SYSTEM FOR PRESENTING PHOTOS ON A WEBSITE
Abstract
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.
Inventors: |
Schiller; Scott; (Sunnyvale,
CA) |
|
Applicant: |
Name |
City |
State |
Country |
Type |
YAHOO! INC. |
Sunnyvale |
CA |
US |
|
|
Assignee: |
YAHOO! INC.
Sunnyvale
CA
|
Family ID: |
38335419 |
Appl. No.: |
13/964746 |
Filed: |
August 12, 2013 |
Related U.S. Patent Documents
|
|
|
|
|
|
Application
Number |
Filing Date |
Patent Number |
|
|
11432033 |
May 10, 2006 |
8510669 |
|
|
13964746 |
|
|
|
|
60765888 |
Feb 6, 2006 |
|
|
|
Current U.S.
Class: |
715/769 |
Current CPC
Class: |
G06F 3/0486
20130101 |
Class at
Publication: |
715/769 |
International
Class: |
G06F 3/0486 20060101
G06F003/0486 |
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.
Description
CROSS-REFERENCE TO RELATED APPLICATION
[0001] 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 INVENTION
[0002] The 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 INVENTION
[0003] With 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.
[0004] 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.
[0005] 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.
[0006] 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.
[0007] 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.
[0008] 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.
SUMMARY
[0009] In 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.
[0010] 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.
BRIEF DESCRIPTION OF THE DRAWINGS
[0011] 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.
[0012] FIG. 1 illustrates a system for presenting photos on a
website within a browser according to an embodiment of the present
invention.
[0013] FIGS. 2A-2D illustrate methods for moving one or more photos
to valid drop targets on a website within a browser according to
embodiments of the present invention.
[0014] FIGS. 3A-3C illustrate methods for moving one or more photos
to invalid drop targets on a website within a browser according to
embodiments of the present invention.
[0015] FIGS. 4A-4C illustrate the mouse-over and removal operations
of thumbnail images in the photo tray according to embodiments of
the present invention.
[0016] FIG. 5A illustrates a method for on-demand display of a
photo tray on a website within a browser according to an embodiment
of the present invention.
[0017] FIG. 5B illustrates a scrollable photo tray according to an
embodiment of the present invention.
[0018] FIGS. 6A-6B illustrate a persistent photo tray according to
an embodiment of the present invention.
[0019] FIGS. 7A-7B illustrate a method for updating the number of
photos in a user viewable window automatically according to an
embodiment of the present invention.
[0020] FIGS. 8A-8C illustrate a method for adjusting the width of
the photo tray automatically according to an embodiment of the
present invention.
[0021] FIGS. 9A-9C illustrate a method for clearing the photo tray
according to an embodiment of the present invention.
DESCRIPTION OF EMBODIMENTS
[0022] 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.
[0023] 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.
[0024] FIG. 1 illustrates a system for presenting photos on a
website within a browser according to an embodiment of the present
invention. The system includes one or more Internet content
provider servers 102, and one or more clients 104. The servers 102
interface with the clients 104 via the Internet 103. The servers
further include a plurality of individual domains, for example,
shopping domain 106, news domain 108, photos domain 110 and other
domains 112. A domain is a computer system implemented with
different hardware and software for a specific application, such as
the shopping applications, news applications, and photo
applications. The photo applications of the present invention are
run on the photos domain110, which implement Web 2.0
functionalities using a combination of HTML, CSS, JavaScript and
"Asynchronous JavaScript and XML" (AJAX).
[0025] 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.
[0026] 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.
[0027] FIGS. 2A-2D illustrate methods for moving one or more photos
to valid drop targets on a website within a browser according to
embodiments of the present invention. FIGS. 2A illustrates a method
for selecting one or more photos on a website within a browser. As
shown in FIG. 2A, the photo browser window includes a directory of
photos in the left column, a plurality of photos, a photo tray 204,
and a set of operations a user may operate on photos in the right
column. In one example, to select a group of six photos, the left
mouse button is held down and drag over the group of six thumbnail
images. The six photos selected are highlighted by colored border
around the thumbnail images 202. In other embodiments, the select
function may be implemented by using the drag selection model or
the control-and-shift selection model. Note that a photo tray is a
working area for storing photo images selected by for performing a
particular action. In this example, slide show, create, share,
edit, or prints & gifts is a particular action a user may
perform on the thumbnail images in the photo tray.
[0028] FIG. 2B illustrates a method for dragging one or more
selected photos on a website within a browser. As shown in FIG. 2B,
the group of six photos selected in FIG. 2A is being dragged to a
drop target. The selected photos are collapsed into smaller
thumbnail icons 206 to indicate their grouped selection while
minimizing the amount of area occupied in the browser window during
the drag operation toward a drop target. In addition, a count of
the photos in transit 208 is shown to indicate the number of photos
being dragged to the drop target. After the user initiates the drag
action, the photo tray 204 is highlighted with a colored border to
provide the user feedback that it is a legal drop target.
[0029] FIG. 2C illustrates dropping one or more photos in a photo
tray on a website within a browser. As shown in FIG. 2C, after the
group of photos of FIG. 2B are dropped in the photo tray, smaller
thumbnails of the photos 212 are shown in the photo tray. Note that
the original thumbnails of the photos in transit (as in FIG. 2B)
and in the photo tray (as in FIG. 2C) are grayed-out 210,
indicating that these photos have already been selected and are no
longer selectable by the user. There are several reasons to
gray-out the thumbnail images in the user viewable window after
such images have been selected and moved to the photo tray. First,
when a user scrolls up and down the browser window, the user may
have forgotten which photos have been already selected. The
grayed-out images would show the user the selected photos in the
tray. Second, since the thumbnail images in the photo tray are
rather small in order to conserve space in the browser window, it
may be difficult for the user to tell which photos have beep
selected. The grayed-out images would provide a feedback about the
user's selection.
[0030] FIG. 2D illustrates dragging one or more selected photos to
a user identifier for sharing photos on a website within a browser.
In this example, the user identifier 214 is a friend's Yahoo! ID.
This step enables allows the user to initial photo sharing with a
friend who is logged in. In other embodiments, dragging and
dropping photos over an album allow a user to conveniently add
photos to an album in any navigation bar of the photo directories
in the left column.
[0031] FIGS. 3A-3C illustrate methods for moving one or more photos
to invalid drop targets on a website within a browser according to
embodiments of the present invention. FIG. 3A illustrates dragging
one or more photos to an invalid drop target. In this example, a
group of ten photos 302 are dragged over an invalid drop target
304. Since the area 304 is an invalid drop target, no photos are
moved to this location.
[0032] FIG. 3B illustrates dropping one or more photos on an
invalid drop target. After the group of photos of FIG. 3A is
dropped onto an invalid drop target, the small thumbnails of the
dropped photos 306 are snapped back to their original position in
the browser window. FIG. 3C illustrates the dropped photos of FIG.
3B have returned to their original locations 308 in the browser
window. Note that in other embodiments, different types of
animation may be implemented by using sound and graphics effects.
For example, when a group of thumbnail images are dragged and
dropped to a valid drop target, a sound effect of approval may be
issued. On the other hand, when a group of thumbnail images are
dragged and dropped to an invalid drop target, a sound effect of
disapproval may be issued. Such sound effects produce an effective
feedback to the user regarding the particular action performed.
[0033] FIGS. 4A-4C illustrate the mouse-over and removal operations
of thumbnail images in the photo tray according to embodiments of
the present invention. FIG. 4A illustrates effects of hovering over
a thumbnail photo in the photo tray. As shown in FIG. 4A, a user
may hover over a thumbnail image in the photo tray to see a larger
view of the image 402.
[0034] FIG. 4B illustrates removing a thumbnail image from the
photo tray. In this example, a user may remove a specific image by
dragging it out of the photo tray. After the specific thumbnail
image is dragged out of the photo tray, there is one less image in
the photo tray. Upon dragging and releasing the dragged thumbnail
image outside of the photo tray, a "cloud" forms and then
disappears as the deselected image animates back to its original
position and state. At this point, the image is no longer visible
in the tray. FIG. 4C illustrates the deselected image returns to
its original form in the browser window.
[0035] FIG. 5A illustrates a method for on-demand availability of a
photo tray on a website within a browser according to an embodiment
of the present invention. As shown in FIG. 5A, when the user has
scrolled to the bottom of a webpage, as shown by scroll bar 502, or
such that the tray is no longer in view, the initiation of a drag
action, as indicated by the collapsed thumbnail images and its
corresponding count 504, causes the photo tray to be brought into
view automatically and to be highlighted for indicating to the user
that it is a valid drop target. In the event the user does not drag
item(s) to be dropped into the tray, it reverts to its original
out-of-view position upon completion of the drag-drop operation.
Such on-demand availability of the photo tray saves the user from
scrolling back and forth between the images the user is interested
to select and the photo tray.
[0036] FIG. 5B illustrates a scrollable photo tray according to an
embodiment of the present invention. In this example, if the photo
tray contains more pictures than can be displayed at once within
the current view, a pair of left and right arrows 506 is provided
to enable the user to scroll the full selection of thumbnail images
in the photo tray. In this example, each time the left or right
arrow is pressed, the thumbnail images in the next page (width of
the tray) is displayed in the photo tray.
[0037] FIGS. 6A-6B illustrate a persistent photo tray according to
an embodiment of the present invention. In one approach, browser
cookies are used to keep track of the thumbnail images in the photo
tray. A unique identifier is used for each photo in the browser.
When a user opens a photo page that contains thumbnail images, the
list of photos on the page is checked to determine if the
identifiers of the photos that are being loaded match the
corresponding identifiers of the thumbnail images in the tray as
provided by the cookie. If there is a match between the original
images in the user viewable window and the images in the tray, the
two items are attached, and the user is given a visual indication
that the original images are grayed-out and they are placed in the
tray. When new photos are added to the tray, the cookie is updated
to reflect the addition of the new thumbnail images. Similarly,
when photos are removed from the tray, the cookie is again updated
to reflect the removal of the images. Therefore, persistency of the
photo tray is maintained by using a cookie to keep track of photos
in the tray. The cookie is updated when images are added or removed
from the photo tray.
[0038] As shown in FIG. 6A, the photo tray is persistent because
the thumbnail images in the tray continue to remain in the tray
even when the user navigates to another webpage. For example, the
user may double-click a larger image of a photo 602 for viewing.
Upon reviewing the larger image, the user returns to the All My
Photos page, and the original photo selections 604 remain in the
photo tray, as shown in FIG. 6B. In another example, the user may
navigate to different photo albums and custom select multiple
photos to be placed in the photo tray. In addition, the user may
navigate to other web pages to gather additional information. The
contents in the photo tray persist even though the web page
displayed on the browser window changes.
[0039] FIGS. 7A-7B illustrate a method for updating the number of
photos in a user viewable window automatically according to an
embodiment of the present invention. In one approach, the user
viewable window is partitioned in a fluid grid layout. In other
words, the user viewable window is divided into rows and columns
according to the size of the thumbnail images to be placed in each
grid location. The dimensions of the user viewable window are
determined using JavaScript in the web browser. Based on the
dimensions of the user viewable window and the dimensions of the
grid for storing the thumbnail images, the number of images to be
placed in the user viewable window is calculated automatically
whenever the user viewable window size changes as a result of a
browser event, such as a window resize event. After the browser had
determined that additional thumbnail images need to be displayed,
it uses JavaScript to determine the images currently within view of
the user, retrieves the URLs of the images, and loads the images
from the locations indicated by the URLs. Once all images have been
loaded for the given page, the JavaScript detaches itself from the
browser to reduce consumption of processing power and thus makes
the system more efficient.
[0040] As shown in FIG. 7A, the user viewable window contains two
rows and each row contains four photos. This user viewable window
is not maximized as there are still blank spaces on the right hand
side of the browser window. When the user enlarges the window by
clicking the maximize button at the upper right hand corner or
resizes the browser window, the user viewable window is
automatically reflowed to have four rows and each row contains six
photos as shown in FIG. 7B. The application calculates the maximum
number of photos that can be fitted in the new user viewable
window, and it automatically loads only the photos that are
currently viewable within the browser window. Note that the user
viewable window also adjusts automatically in a similar but reverse
manner when the browser window reduces in size.
[0041] FIGS. 8A-8C illustrate a method for adjusting the scrolling
behavior of the photo tray automatically according to an embodiment
of the present invention. In this example, the method for adjusting
the width of the photo tray is similar to the method for adjusting
the number of thumbnail images to be displayed in a user viewable
window upon a browser resize event discussed above, except that the
photo tray stores the small thumbnail images in just one row. As
shown in FIG. 8A, the browser window does not occupy the entire
screen initially, leaving spaces both on the right hand side and at
the bottom of the screen. The photo tray typically stores the
photos in the sequence they were added and shows the most recent
photos that have been moved into the tray. When the user clicks the
maximize window button or when the browser window is resized, the
browser window enlarges to fill the entire screen, as shown in FIG.
8B. In some circumstances this can leave certain space, as
indicated by the arrow 802, in the photo tray temporarily. As a
result, the photo tray will scroll automatically to show more
photos. In this example, the user has scrolled the tray fully to
the right, showing the last photo on the right-hand side, and then
enlarged the window making more viewing space available. FIG. 8C
illustrates the photo tray after it has been automatically adjusted
and filled.
[0042] FIGS. 9A-9C illustrate a method for clearing the photo tray
according to an embodiment of the present invention. FIG. 9A
illustrates a view of the browser window prior to clearing the
photo tray. The browser window includes the photo tray with small
thumbnail images and its corresponding grayed-out images in the
user viewable window below the photo tray. One way to clear the
entire thumbnail images in the photo tray is by clicking the clear
(x) button at the right side of the tray.
[0043] FIG. 9B illustrates a view of the photo tray shortly after
clicking the clear button. The photo tray collapses as the bottom
edge moves upward over the photos, first hiding, and then removing
the thumbnail images. As shown in FIG. 9B, the photo tray is in the
process of moving upward (has moved up partially) and therefore
(partially) hides the thumbnail images. FIG. 9C illustrates a view
after the photo tray has been cleared. After the thumbnail images
in the photo tray are cleared, the photo tray is empty and the
corresponding images in the user viewable window are no longer
grayed-out.
[0044] 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.
[0045] 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.
[0046] 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.
* * * * *