Vertical scrolling of album images
Images are displayed in an album mode in which an image occupying a focus position is separated by bars from adjacent images in the album. The bars serve as a visual separator between the images and signify to a user that the images can be vertically scrolled. If the focus image occupies less than the full height of the screen, then part of the adjacent images are shown above and below the focus image. If the focus image occupies the full height of the screen, then the image is reduced in size to occupy less than the full height, causing the adjacent images to also be displayed. If the user scrolls the image, the image reduction decreases linearly with the scrolling until the image is shown at full height. Continued scrolling causes the image to move off the screen and the previous or next image to be displayed.
1. A method comprising:
showing a focus image at a focus position on a display of a client, wherein a height of the focus image is cropped to produce top and bottom spaces on the display and the focus image is from an image album;
showing on the display at least a portion of a top image from the album above the focus image and at least a portion of a bottom image from the album below the focus image, the top and bottom images respectively occupying at least parts of the top and bottom spaces on the display;
showing on the display a top separator bar disposed between the focus image and the top image and a bottom separator bar disposed between the focus image and the bottom image, the top and bottom separator bars respectively occupying at least parts of the top and bottom spaces on the display;
receiving, by the client, a vertical scroll command to scroll the focus image vertically on the display; and
responsive to receiving the vertical scroll command, increasing the height of the focus image and reducing sizes of the top and bottom spaces shown in the display of the client, wherein increasing the height of the focus image comprises linearly restoring cropped top and bottom portions of the focus image responsive to an amount of scroll indicated by the vertical scroll command.
2. The method of claim 1 , wherein showing on the display a top separator bar disposed between the focus image and the top image and a bottom separator bar disposed between the focus image and the bottom image comprises:
overlaying the displayed focus image, the top image, and the bottom image over a background;
wherein the top image is positioned adjacent to the focus image to expose a top gap through which the background shows to produce the top separator bar and the bottom image is positioned adjacent to the focus image to expose a bottom gap through which the background shows to produce the bottom separator bar.
3. The method of claim 1 , further comprising:
comparing the height of the focus image to a threshold, the threshold determined responsive to a height of the display; and
reducing the height of the focus image responsive to the comparison to the threshold.
4. The method of claim 1 , wherein the image album includes a plurality of ordered images and wherein the top image and the bottom image are adjacent to the focus image in an order of the plurality of images in the album.
5. The method of claim 1 , further comprising:
responsive to receiving a second vertical scroll command after receiving the vertical scroll command, further increasing the height of the focus image to occupy the top and bottom spaces; and
responsive to receiving a third vertical scroll command after receiving the second vertical scroll command, scrolling the focus image off the display.
6. The method of claim 1 , wherein a center portion of the focus image remains anchored at a same position on the display of the client as the height of the focus image is increased.
7. A non-transitory computer-readable storage medium storing computer program instructions executable by a processor to perform operations comprising:
showing a focus image at a focus position on a display of a client, wherein a height of the focus image is cropped to produce top and bottom spaces on the display and the focus image is from an image album;
showing on the display at least a portion of a top image from the album above the focus image and at least a portion of a bottom image from the album below the focus image, the top and bottom images respectively occupying at least parts of the top and bottom spaces on the display;
showing on the display a top separator bar disposed between the focus image and the top image and a bottom separator bar disposed between the focus image and the bottom image, the top and bottom separator bars respectively occupying at least parts of the top and bottom spaces on the display;
receiving, by the client, a vertical scroll command to scroll the focus image vertically on the display; and
responsive to receiving the vertical scroll command, increasing the height of the focus image and reducing sizes of the top and bottom spaces shown in the display of the client, wherein increasing the height of the focus image comprises linearly restoring cropped top and bottom portions of the focus image responsive to an amount of scroll indicated by the vertical scroll command.
8. The medium of claim 7 , wherein showing on the display a top separator bar disposed between the focus image and the top image and a bottom separator bar disposed between the focus image and the bottom image comprises:
overlaying the displayed focus image, the top image, and the bottom image over a background;
wherein the top image is positioned adjacent to the focus image to expose a top gap through which the background shows to produce the top separator bar and the bottom image is positioned adjacent to the focus image to expose a bottom gap through which the background shows to produce the bottom separator bar.
9. The medium of claim 7 , further comprising:
comparing the height of the focus image to a threshold, the threshold determined responsive to a height of the display; and
reducing the height of the focus image responsive to the comparison to the threshold.
10. The medium of claim 7 , wherein the image album includes a plurality of ordered images and wherein the top image and the bottom image are adjacent to the focus image in an order of the plurality of images in the album.
11. The medium of claim 7 , further comprising:
responsive to receiving a second vertical scroll command after receiving the vertical scroll command, further increasing the height of the focus image to occupy the top and bottom spaces; and
responsive to receiving a third vertical scroll command after receiving the second vertical scroll command, scrolling the focus image off the display.
12. The medium of claim 7 , wherein a center portion of the focus image remains anchored at a same position on the display of the client as the height of the focus image is increased.
13. A system comprising:
a computer processor for executing computer program instructions; and
a non-transitory computer-readable storage medium storing computer program instructions executable by the processor to perform operations comprising:
showing a focus image at a focus position on a display of a client, wherein a height of the focus image is cropped to produce top and bottom spaces on the display and the focus image is from an image album;
showing on the display at least a portion of a top image from the album above the focus image and at least a portion of a bottom image from the album below the focus image, the top and bottom images respectively occupying at least parts of the top and bottom spaces on the display;
showing on the display a top separator bar disposed between the focus image and the top image and a bottom separator bar disposed between the focus image and the bottom image, the top and bottom separator bars respectively occupying at least parts of the top and bottom spaces on the display;
receiving, by the client, a vertical scroll command to scroll the focus image vertically on the display; and
responsive to receiving the vertical scroll command, increasing the height of the focus image and reducing sizes of the top and bottom spaces shown in the display of the client, wherein increasing the height of the focus image comprises linearly restoring cropped top and bottom portions of the focus image responsive to an amount of scroll indicated by the vertical scroll command.
14. The system of claim 13 , wherein showing on the display a top separator bar disposed between the focus image and the top image and a bottom separator bar disposed between the focus image and the bottom image comprises:
overlaying the displayed focus image, the top image, and the bottom image over a background;
wherein the top image is positioned adjacent to the focus image to expose a top gap through which the background shows to produce the top separator bar and the bottom image is positioned adjacent to the focus image to expose a bottom gap through which the background shows to produce the bottom separator bar.
15. The system of claim 13 , further comprising:
comparing the height of the focus image to a threshold, the threshold determined responsive to a height of the display; and
reducing the height of the focus image responsive to the comparison to the threshold.
16. The system of claim 13 , wherein the image album includes a plurality of ordered images and wherein the top image and the bottom image are adjacent to the focus image in an order of the plurality of images in the album.
17. The system of claim 13 , further comprising:
responsive to receiving a second vertical scroll command after receiving the vertical scroll command, further increasing the height of the focus image to occupy the top and bottom spaces; and
responsive to receiving a scroll third vertical scroll command after receiving the second vertical scroll command, scrolling the focus image off the display.