Image Gallery

The idea here is to take a folder of images or a collection of links to images and render them in a grid and then be able to tap a given image to view a large version of it.

When viewing a single image, the user could use the left and right arrows to progress through the images in the gallery.


Mock-ups of image gallery grid and single image display. The former has a heading and a two-column grid of images with captions. The latter a larger image, caption and previous/next buttons


  <ig-img src="" alt="description of image" />
  <ig-img src="" alt="description of this image" />


  • Rendering images
  • Grid rendering
  • State changing from grid to single image viewing
  • Handling user input, from tapping to keyboard


Need a zip of images? Okay, here's a zip of four images you can use.

Stretch Goals

  • Play / pause to cycle through the images on an interval, maybe someone wants to display their favorite photos on rotation like a digital picture frame