Photo Gallery

Status

Not started / In progress / Complete

Impact

High / Medium / Low

Driver

Approver

Contributors

@Uni (Hwa Young) Oh @Sara Greenwood @Derek Matthew @Joseph McLarty

Informed

Due date

Resources

 Relevant data

 Background

A photo gallery template is required for pages that need to showcase image libraries.

To be determined if this pattern should be merged with Spotlight, or how it would be different.

Examples

Description

Example

Description

Example

Current http://toronto.ca photo gallery has the following features:

  • Auto scroll images, with ability to move page and forth with mouse or keyboard

  • Indicator of number of images and which image you are on

  • Text description below image

Issues:

  • No way to stop auto scroll

  • The images change sizes as it scrolls

  • Hard to see the indicator as it is over the text

  • Text can be hard to read - covered by indicator and a gradient on the left/right sides

Parks photo gallery

  • Large image with thumbnails vertically on right-hand side

  • Selected thumbnail is “highlighted” in grey

  • Caption appears on hover

  • Can expand image to full screen

Issues:

  • Works best for landscape photos only

  • Caption should appear always, not on hover

  • No way to next/previous through photos when expanded

  • Mobile view is very small

Sunnybrook Park - City of Toronto

 

Chicago

  • Large image with thumbnails along bottom

  • Can select thumbnails or move between photos with buttons/keyboard

  • Options for autoplay, zoom in/out and full screen

  • Captions are always displayed

Issues:

  • Thumbnails are darkened, hard to see

  • Options for full screen etc, are hard to see

City of Chicago :: Photo Gallery

 

 

Recommendations

 

 Options considered

 

Option 1

Option 2

 

Option 1

Option 2

Description

 

 

Pros and cons

Estimated cost

Large

Medium

 Action items

 Outcome