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 a respective content item at a first size, 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, reducing a size of the respective content item to a second size that is smaller than the first size and displaying representations of a plurality of other content items in a multi-row arrangement;

while displaying representations of the plurality of content items in the multi-row arrangement, detecting termination of the first multi-contact gesture; and

in response to detecting termination of the first multi-contact gesture, displaying a representation of the respective content item at a third size in the multi-row arrangement, wherein the third size is smaller than the second size.

2. The electronic device of claim 1 , wherein displaying the respective content item at the first size includes displaying the respective content item in a slideshow mode.

3. 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 in accordance with the first multi-contact gesture.

4. The electronic device of claim 1 , wherein the representations of the plurality of content items are content thumbnails corresponding to the plurality of content items.

5. The electronic device of claim 1 , wherein, while the first multi-contact gesture is detected, the representations of the plurality of content items in the multi-row arrangement do not include a representation of the respective content item.

6. The electronic device of claim 1 , wherein:

the multi-row arrangement includes a respective position corresponding to the respective content item, and

while the first multi-contact gesture is detected, the respective position within the multi-row arrangement does not display a representation of the respective content item.

7. The electronic device of claim 6 , wherein, while the first multi-contact gesture is detected, the respective position within the multi-row arrangement does not display a representation of any content item.

8. The electronic device of claim 6 , wherein, displaying the representation of the respective content item in the multi-row arrangement includes:

displaying, in response to detecting termination of the first multi-contact gesture, an animation of the respective content item shrinking and moving to the respective position in the multi-row arrangement corresponding to the respective content item.

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

while displaying the respective content item at the first size, concurrently displaying a scrubber, wherein the scrubber comprises representations of at least a subset of the plurality of other content items;

while displaying the respective content item at the first size and concurrently displaying the scrubber, detecting a third contact on the touch-sensitive surface at a location on the scrubber corresponding to a second content item of the at least the subset of the plurality of other content items; and

in response to detecting the third contact on the touch-sensitive surface, replacing display of the respective content item at the first size with display of the second content item at the first size.

10. The electronic device of claim 1 , wherein:

while the respective content item is displayed at the second size, the respective content item covers a respective portion of the multi-row arrangement, and

while the respective content item is displayed at the third size, the respective content item does not cover the respective portion of the multi-row arrangement.

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

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact; and

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of a second content item while maintaining display of the representations of the plurality of other content items in the multi-row arrangement.

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

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact;

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of the respective content item and ceasing display of a respective portion of the multi-row arrangement that was displayed prior to detecting the further movement of the first contact with respect to the second contact.

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

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact;

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of the respective content item and displaying a respective portion of the multi-row arrangement that was covered by the respective content item prior to detecting the further movement of the first contact with respect to the second contact.

14. A method, comprising:

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

while displaying a respective content item at a first size, 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, reducing a size of the respective content item to a second size that is smaller than the first size and displaying representations of a plurality of other content items in a multi-row arrangement;

while displaying representations of the plurality of content items in the multi-row arrangement, detecting termination of the first multi-contact gesture; and

in response to detecting termination of the first multi-contact gesture, displaying a representation of the respective content item at a third size in the multi-row arrangement, wherein the third size is smaller than the second size.

15. The method of claim 14 , wherein displaying the respective content item at the first size includes displaying the respective content item in a slideshow mode.

16. The method of claim 14 , further comprising:

in response to detecting the first multi-contact gesture, rotating the respective content item in accordance with the first multi-contact gesture.

17. The method of claim 14 , wherein the representations of the plurality of content items are content thumbnails corresponding to the plurality of content items.

18. The method of claim 14 , wherein, while the first multi-contact gesture is detected, the representations of the plurality of content items in the multi-row arrangement do not include a representation of the respective content item.

19. The method of claim 18 , wherein, while the first multi-contact gesture is detected, the respective position within the multi-row arrangement does not display a representation of any content item.

20. The method of claim 18 , wherein, displaying the representation of the respective content item in the multi-row arrangement includes:

displaying, in response to detecting termination of the first multi-contact gesture, an animation of the respective content item shrinking and moving to the respective position in the multi-row arrangement corresponding to the respective content item.

21. The method of claim 14 , wherein:

the multi-row arrangement includes a respective position corresponding to the respective content item, and

while the first multi-contact gesture is detected, the respective position within the multi-row arrangement does not display a representation of the respective content item.

22. The method of claim 14 , further comprising:

while displaying the respective content item at the first size, concurrently displaying a scrubber, wherein the scrubber comprises representations of at least a subset of the plurality of other content items;

while displaying the respective content item at the first size and concurrently displaying the scrubber, detecting a third contact on the touch-sensitive surface at a location on the scrubber corresponding to a second content item of the at least the subset of the plurality of other content items; and

in response to detecting the third contact on the touch-sensitive surface, replacing display of the respective content item at the first size with display of the second content item at the first size.

23. The method of claim 14 , wherein:

while the respective content item is displayed at the second size, the respective content item covers a respective portion of the multi-row arrangement, and

while the respective content item is displayed at the third size, the respective content item does not cover the respective portion of the multi-row arrangement.

24. The method of claim 14 , further comprising:

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact; and

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of a second content item while maintaining display of the representations of the plurality of other content items in the multi-row arrangement.

25. The method of claim 14 , further comprising:

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact;

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of the respective content item and ceasing display of a respective portion of the multi-row arrangement that was displayed prior to detecting the further movement of the first contact with respect to the second contact.

26. The method of claim 14 , further comprising:

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact;

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of the respective content item and displaying a respective portion of the multi-row arrangement that was covered by the respective content item prior to detecting the further movement of the first contact with respect to the second contact.

27. 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 a respective content item at a first size, 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, reducing a size of the respective content item to a second size that is smaller than the first size and displaying representations of a plurality of other content items in a multi-row arrangement;

while displaying representations of the plurality of content items in the multi-row arrangement, detecting termination of the first multi-contact gesture; and

in response to detecting termination of the first multi-contact gesture, displaying a representation of the respective content item at a third size in the multi-row arrangement, wherein the third size is smaller than the second size.

28. The non-transitory computer-readable storage medium of claim 27 , wherein displaying the respective content item at the first size includes displaying the respective content item in a slideshow mode.

29. The non-transitory computer-readable storage medium of claim 27 , wherein the one or more programs further include instructions for:

in response to detecting the first multi-contact gesture, rotating the respective content item in accordance with the first multi-contact gesture.

30. The non-transitory computer-readable storage medium of claim 27 , wherein the representations of the plurality of content items are content thumbnails corresponding to the plurality of content items.

31. The non-transitory computer-readable storage medium of claim 27 , wherein, while the first multi-contact gesture is detected, the representations of the plurality of content items in the multi-row arrangement do not include a representation of the respective content item.

32. The non-transitory computer-readable storage medium of claim 27 , wherein:

the multi-row arrangement includes a respective position corresponding to the respective content item, and

while the first multi-contact gesture is detected, the respective position within the multi-row arrangement does not display a representation of the respective content item.

33. The non-transitory computer-readable storage medium of claim 32 , wherein, while the first multi-contact gesture is detected, the respective position within the multi-row arrangement does not display a representation of any content item.

34. The non-transitory computer-readable storage medium of claim 32 , wherein, displaying the representation of the respective content item in the multi-row arrangement includes:

displaying, in response to detecting termination of the first multi-contact gesture, an animation of the respective content item shrinking and moving to the respective position in the multi-row arrangement corresponding to the respective content item.

35. The non-transitory computer-readable storage medium of claim 27 , wherein the one or more programs further include instructions for:

while displaying the respective content item at the first size, concurrently displaying a scrubber, wherein the scrubber comprises representations of at least a subset of the plurality of other content items;

while displaying the respective content item at the first size and concurrently displaying the scrubber, detecting a third contact on the touch-sensitive surface at a location on the scrubber corresponding to a second content item of the at least the subset of the plurality of other content items; and

in response to detecting the third contact on the touch-sensitive surface, replacing display of the respective content item at the first size with display of the second content item at the first size.

36. The non-transitory computer-readable storage medium of claim 27 , wherein:

while the respective content item is displayed at the second size, the respective content item covers a respective portion of the multi-row arrangement, and

while the respective content item is displayed at the third size, the respective content item does not cover the respective portion of the multi-row arrangement.

37. The non-transitory computer-readable storage medium of claim 27 , wherein the one or more programs further include instructions for:

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact; and

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of a second content item while maintaining display of the representations of the plurality of other content items in the multi-row arrangement.

38. The non-transitory computer-readable storage medium of claim 27 , wherein the one or more programs further include instructions for:

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact;

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of the respective content item and ceasing display of a respective portion of the multi-row arrangement that was displayed prior to detecting the further movement of the first contact with respect to the second contact.

39. The non-transitory computer-readable storage medium of claim 27 , wherein the one or more programs further include instructions for:

while continuing to detect the first contact and the second contact on the touch-sensitive surface, detecting a further movement of the first contact with respect to the second contact; and

in response to detecting the further movement of the first contact with respect to the second contact, changing an appearance of the respective content item and displaying a respective portion of the multi-row arrangement that was covered by the respective content item prior to detecting the further movement of the first contact with respect to the second contact.