Device, method, and graphical user interface for navigating and displaying content in context

1. An electronic device, comprising:

a display and a touch-sensitive surface;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in memory and configured to be executed by the one or more processors, the one or more programs including instructions for:

while displaying representations of content items on the display in a first predefined arrangement, wherein the representations of content items are content thumbnails, detecting a first contact and a second contact on the touch-sensitive surface;

while continuing to detect the first contact and the second contact on the touch-sensitive surface:

detecting a first multi-contact gesture that includes movement of the first contact with respect to the second contact;

in response to detecting the first multi-contact gesture, displaying a respective content item that is associated with a respective content thumbnail of the representations of content items;

detecting termination of the first multi-contact gesture;

determining, based on the first multi-contact gesture, whether first resizing criteria are met; and

in response to detecting termination of the first multi-contact gesture:

in accordance with a determination that the first resizing criteria are not met, ceasing to display the respective content item that is associated with the respective content thumbnail; and

in accordance with a determination that the first resizing criteria are met, displaying the respective content item in a second predefined arrangement and ceasing to display the representations of content items.

2. The electronic device of claim 1 , wherein the one or more programs further include instructions for:

displaying a plurality of album thumbnails, wherein a first album thumbnail represents the content items;

detecting a third contact and a fourth contact on the touch-sensitive surface;

while continuing to detect the third contact and the fourth contact on the touch-sensitive surface:

detecting a second multi-contact gesture that includes movement of the third contact with respect to the fourth contact;

in response to detecting the second multi-contact gesture, displaying the representations of the content items associated with the first album thumbnail;

detecting termination of the second multi-contact gesture;

determining, based on the second multi-contact gesture, whether second resizing criteria are met; and,

in response to detecting termination of the second multi-contact gesture:

in accordance with a determination that the second resizing criteria are not met, ceasing to display the representations of the content items associated with the first album thumbnail; and

in accordance with a determination that the second resizing criteria are met, displaying the representations of the content items associated with the first album thumbnail on the display in the first predefined arrangement.

3. The electronic device of claim 2 , wherein each respective album thumbnail of the plurality of album thumbnails is located at a respective initial region on the display and has a respective initial size.

4. The electronic device of claim 2 , wherein the third contact and the fourth contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the first album thumbnail on the display.

5. The electronic device of claim 2 , wherein the one or more programs further include instructions for:

in response to detecting the second multi-contact gesture, ceasing to display the first album thumbnail in an initial region of the first album thumbnail.

6. The electronic device of claim 2 , wherein:

the second resizing criteria are not met when a second resizing metric based on the second multi-contact gesture is below a predefined threshold; and

the second resizing criteria are met when the second resizing metric based on the second multi-contact gesture is above the predefined threshold.

7. The electronic device of claim 1 , wherein:

the first resizing criteria are not met when a first resizing metric based on the first multi-contact gesture is below a predefined threshold; and

the first resizing criteria are met when the first resizing metric based on the first multi-contact gesture is above the predefined threshold.

8. The electronic device of claim 1 , wherein the first contact and the second contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the respective content thumbnail on the display.

9. The electronic device of claim 1 , wherein the first predefined arrangement of the representations of the content items is an initial array of content thumbnails.

10. The electronic device of claim 1 , wherein the respective content item is a first image.

11. The electronic device of claim 10 , wherein displaying the respective content item in the second predefined arrangement includes displaying the first image in a slideshow mode.

12. The electronic device of claim 11 , wherein the one or more programs further include instructions for:

while in the slideshow mode,

navigating from the first image to a subsequent image in the slideshow mode;

detecting a fifth contact and a sixth contact on the touch-sensitive surface;

detecting a third multi-contact gesture that includes the fifth contact and the sixth contact; and,

in response to detecting the third multi-contact gesture:

exiting the slideshow mode;

displaying an updated array of content thumbnails that does not include a content thumbnail for the subsequent image; and,

shrinking the subsequent image in accordance with the third multi-contact gesture;

detecting termination of the third multi-contact gesture; and,

in response to detecting termination of the third multi-contact gesture, displaying the content thumbnail for the subsequent image in the updated array.

13. The electronic device of claim 1 , wherein the one or more programs further include instructions for:

in response to detecting the first multi-contact gesture, ceasing to display the respective content thumbnail in an initial region of the respective content thumbnail.

14. The electronic device of claim 1 , wherein the one or more programs further include instructions for:

in response to detecting the first multi-contact gesture, rotating the respective content item based on the movement of the first contact with respect to the second contact.

15. A non-transitory computer-readable storage medium storing one or more programs configured to be executed by one or more processors of an electronic device with a display and a touch-sensitive surface, the one or more programs including instructions for:

while displaying representations of content items on the display in a first predefined arrangement, wherein the representations of content items are content thumbnails, detecting a first contact and a second contact on the touch-sensitive surface;

while continuing to detect the first contact and the second contact on the touch-sensitive surface:

detecting a first multi-contact gesture that includes movement of the first contact with respect to the second contact;

in response to detecting the first multi-contact gesture, displaying a respective content item that is associated with a respective content thumbnail of the representations of content items;

detecting termination of the first multi-contact gesture;

determining, based on the first multi-contact gesture, whether first resizing criteria are met; and

in response to detecting termination of the first multi-contact gesture:

in accordance with a determination that the first resizing criteria are not met, ceasing to display the respective content item that is associated with the respective content thumbnail; and

in accordance with a determination that the first resizing criteria are met, displaying the respective content item in a second predefined arrangement and ceasing to display the representations of content items.

16. The storage medium of claim 15 , wherein the one or more programs further include instructions for:

displaying a plurality of album thumbnails, wherein a first album thumbnail represents the content items;

detecting a third contact and a fourth contact on the touch-sensitive surface;

while continuing to detect the third contact and the fourth contact on the touch-sensitive surface:

detecting a second multi-contact gesture that includes movement of the third contact with respect to the fourth contact;

in response to detecting the second multi-contact gesture, displaying the representations of the content items associated with the first album thumbnail;

detecting termination of the second multi-contact gesture;

determining, based on the second multi-contact gesture, whether second resizing criteria are met; and,

in response to detecting termination of the second multi-contact gesture:

in accordance with a determination that the second resizing criteria are not met, ceasing to display the representations of the content items associated with the first album thumbnail; and

in accordance with a determination that the second resizing criteria are met, displaying the representations of the content items associated with the first album thumbnail on the display in the first predefined arrangement.

17. The storage medium of claim 16 , wherein each respective album thumbnail of the plurality of album thumbnails is located at a respective initial region on the display and has a respective initial size.

18. The storage medium of claim 16 , wherein the third contact and the fourth contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the first album thumbnail on the display.

19. The storage medium of claim 16 , wherein the one or more programs further include instructions for:

in response to detecting the second multi-contact gesture, ceasing to display the first album thumbnail in an initial region of the first album thumbnail.

20. The storage medium of claim 16 , wherein:

the second resizing criteria are not met when a second resizing metric based on the second multi-contact gesture is below a predefined threshold; and

the second resizing criteria are met when the second resizing metric based on the second multi-contact gesture is above the predefined threshold.

21. The storage medium of claim 15 , wherein:

the first resizing criteria are not met when a first resizing metric based on the first multi-contact gesture is below a predefined threshold; and

the first resizing criteria are met when the first resizing metric based on the first multi-contact gesture is above the predefined threshold.

22. The storage medium of claim 15 , wherein the first contact and the second contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the respective content thumbnail on the display.

23. The storage medium of claim 15 , wherein the first predefined arrangement of the representations of the content items is an initial array of content thumbnails.

24. The storage medium of claim 15 , wherein the respective content item is a first image.

25. The storage medium of claim 24 , wherein displaying the respective content item in the second predefined arrangement includes displaying the first image in a slideshow mode.

26. The storage medium of claim 25 , wherein the one or more programs further include instructions for:

while in the slideshow mode,

navigating from the first image to a subsequent image in the slideshow mode;

detecting a fifth contact and a sixth contact on the touch-sensitive surface;

detecting a third multi-contact gesture that includes the fifth contact and the sixth contact; and,

in response to detecting the third multi-contact gesture:

exiting the slideshow mode;

displaying an updated array of content thumbnails that does not include a content thumbnail for the subsequent image; and,

shrinking the subsequent image in accordance with the third multi-contact gesture;

detecting termination of the third multi-contact gesture; and,

in response to detecting termination of the third multi-contact gesture, displaying the content thumbnail for the subsequent image in the updated array.

27. The storage medium of claim 15 , wherein the one or more programs further include instructions for:

in response to detecting the first multi-contact gesture, ceasing to display the respective content thumbnail in an initial region of the respective content thumbnail.

28. The storage medium of claim 15 , wherein the one or more programs further include instructions for:

in response to detecting the first multi-contact gesture, rotating the respective content item based on the movement of the first contact with respect to the second contact.

29. A method, comprising:

at an electronic device with a display and a touch-sensitive surface:

while displaying representations of content items on the display in a first predefined arrangement, wherein the representations of content items are content thumbnails, detecting a first contact and a second contact on the touch-sensitive surface;

while continuing to detect the first contact and the second contact on the touch-sensitive surface:

detecting a first multi-contact gesture that includes movement of the first contact with respect to the second contact;

in response to detecting the first multi-contact gesture, displaying a respective content item that is associated with a respective content thumbnail of the representations of content items;

detecting termination of the first multi-contact gesture;

determining, based on the first multi-contact gesture, whether first resizing criteria are met; and

in response to detecting termination of the first multi-contact gesture:

in accordance with a determination that the first resizing criteria are not met, ceasing to display the respective content item that is associated with the respective content thumbnail; and

in accordance with a determination that the first resizing criteria are met, displaying the respective content item in a second predefined arrangement and ceasing to display the representations of content items.

30. The method of claim 29 , further comprising:

displaying a plurality of album thumbnails, wherein a first album thumbnail represents the content items;

detecting a third contact and a fourth contact on the touch-sensitive surface;

while continuing to detect the third contact and the fourth contact on the touch-sensitive surface:

detecting a second multi-contact gesture that includes movement of the third contact with respect to the fourth contact;

in response to detecting the second multi-contact gesture, displaying the representations of the content items associated with the first album thumbnail;

detecting termination of the second multi-contact gesture;

determining, based on the second multi-contact gesture, whether second resizing criteria are met; and,

in response to detecting termination of the second multi-contact gesture:

in accordance with a determination that the second resizing criteria are not met, ceasing to display the representations of the content items associated with the first album thumbnail; and

in accordance with a determination that the second resizing criteria are met, displaying the representations of the content items associated with the first album thumbnail on the display in the first predefined arrangement.

31. The method of claim 30 , wherein each respective album thumbnail of the plurality of album thumbnails is located at a respective initial region on the display and has a respective initial size.

32. The method of claim 30 , wherein the third contact and the fourth contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the first album thumbnail on the display.

33. The method of claim 30 , further comprising:

in response to detecting the second multi-contact gesture, ceasing to display the first album thumbnail in an initial region of the first album thumbnail.

34. The method of claim 30 , wherein:

the second resizing criteria are not met when a second resizing metric based on the second multi-contact gesture is below a predefined threshold; and

the second resizing criteria are met when the second resizing metric based on the second multi-contact gesture is above the predefined threshold.

35. The method of claim 29 , wherein:

the first resizing criteria are not met when a first resizing metric based on the first multi-contact gesture is below a predefined threshold; and

the first resizing criteria are met when the first resizing metric based on the first multi-contact gesture is above the predefined threshold.

36. The method of claim 29 , wherein the first contact and the second contact are detected at locations on the touch-sensitive surface that correspond to an initial region of the respective content thumbnail on the display.

37. The method of claim 29 , wherein the first predefined arrangement of the representations of the content items is an initial array of content thumbnails.

38. The method of claim 29 , wherein the respective content item is a first image.

39. The method of claim 38 , wherein displaying the respective content item in the second predefined arrangement includes displaying the first image in a slideshow mode.

40. The method of claim 39 , further comprising:

while in the slideshow mode,

navigating from the first image to a subsequent image in the slideshow mode;

detecting a fifth contact and a sixth contact on the touch-sensitive surface;

detecting a third multi-contact gesture that includes the fifth contact and the sixth contact; and,

in response to detecting the third multi-contact gesture:

exiting the slideshow mode;

displaying an updated array of content thumbnails that does not include a content thumbnail for the subsequent image; and,

shrinking the subsequent image in accordance with the third multi-contact gesture;

detecting termination of the third multi-contact gesture; and,

in response to detecting termination of the third multi-contact gesture, displaying the content thumbnail for the subsequent image in the updated array.

41. The method of claim 29 , further comprising:

in response to detecting the first multi-contact gesture, ceasing to display the respective content thumbnail in an initial region of the respective content thumbnail.

42. The method of claim 29 , further comprising:

in response to detecting the first multi-contact gesture, rotating the respective content item based on the movement of the first contact with respect to the second contact.